Переключение между несколькими дорожками src изображения

Question

В настоящее время все HTML-файлы в моем приложении имеют жесткий путь относительного изображения, указывающий на какой-либо каталог. Напр.

<img src="projectA/style/images/Preferences.png"/> 

Теперь я планирую переключаться между двумя режимами проекта 'Mode-1' & 'Mode-2'. На основе текущего активного режима мне нужно переключить путь изображения src (имя изображения будет таким же, только путь должен быть изменен).

Как написать настраиваемый путь src, который позволит мне переключать каталоги на некоторый предопределенный путь, не изменяя каждый раз HTML.

См., Например,

При активном режиме: 'Режим-1'

<img src="projectA/style/images/Preferences.png"/> 

Когда активен режим становится: 'Режим-2'

<img src="projectB/files/newStyle/images/Preferences.png"/> 

Я готов изменить весь HTML-файл один раз.

Я использую jQuery и AngularJS в своем приложении.

Answer 1

Вы уверены, есть некоторый код в приложении, которое определяет режим приложения runnunig в Таким образом, вы можете сделать следующее:.

var mode1, 
 
    imgsrc; 
 

 
if (some condition) { 
 
    mode1 = true; 
 
} // otherwise must be mode2 
 

 
if (mode1) { 
 
    imgsrc = 'projectA/style/images/'; 
 
} else { 
 
    // must be mode2 
 
    imgsrc = 'projectB/files/newStyle/images/'; 
 
} 
 

 
// then whreever you have an img 
 
$(img).attr('src', imgsrc + 'Preferences.png'); 
 

 
// of course you need to indentify the individual image somehow

Answer 2

Вот Угловым способ сделать хитрость:

var myApp = angular.module('myApp', []); 
 
myApp.controller('MyCtrl', ['$scope', function($scope) { 
 
    $scope.mode = {}; 
 
    $scope.modesImg = [{ 
 
    mode: 1, 
 
    url: 'http://a.amz.mshcdn.com/media/ZgkyMDEyLzEyLzA0L2QwL2NhdC5jNEEKcAl0aHVtYgkxNTB4MTUwIwplCWpwZw/4d610ee3/6a7/cat.jpg' 
 
    }, { 
 
    mode: 2, 
 
    url: 'http://ihavecat.com/wp-content/uploads/2016/10/FullSizeRender-8-150x150.jpg' 
 
    }]; 
 
}]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp"> 
 
    <div ng-controller="MyCtrl"> 
 
    <div ng-repeat="m in modesImg"> 
 
     <input type="radio" ng-model="mode.selected" ng-value="m.mode"/> Mode {{m.mode}} 
 
    </div> 
 

 
    <img ng-src="{{modesImg[mode.selected - 1].url}}"/> 
 
    </div> 
 
</div>

JSFiddle demo здесь, более читаемый, чем фрагмент.

---

Преимущество здесь в том, что вы можете очень легко режим добавить, просто нажав несколько элементов в массиве.

Answer 3

Я предлагаю использовать изображения на основе div и просто переключать класс div в зависимости от режима, в котором вы используете приложение. это простой Java Script JQuery пример

изменение OnClick функционировать вызов после смены режима в соответствии с вашими требованиями ..

var mode = 'mode1';/*initialize */ 
 
/*after initialization or change*/ 
 
function callModeChange(){ 
 
    /*chage as per your requirement 
 
    i am just switching in 2 modes*/ 
 
    if(mode == 'mode1'){ 
 
    mode = 'mode2'; 
 
    } 
 
    else{ 
 
    mode = 'mode1'; 
 
    } 
 
    ManageImageOfDiv(mode); 
 
} 
 
    
 
/*to change image as per mode in use*/  
 
function ManageImageOfDiv(mode){  
 
if(mode == 'mode1'){ 
 
    alert("changing to mode 1"); 
 
    $("#changingDiv").removeClass("mode1Class"); 
 
    $("#changingDiv").addClass("mode2Class"); 
 
    } 
 
else{ 
 
    alert("changing to mode 2"); 
 
    $("#changingDiv").removeClass("mode2Class"); 
 
    $("#changingDiv").addClass("mode1Class"); 
 
    } 
 
}

.mode1Class{ 
 
    background-image: url('../../images/imageMode1.png'); 
 
    background-color : green; 
 
    /*add dimentions as per your requirement*/ 
 
    } 
 
.mode2Class{ 
 
    background-image: url('../../images/imageForMode2.png'); 
 
    background-color: red; 
 
    /*add dimentions as per your requirement*/ 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="mode1Class" id="changingDiv" onclick="callModeChange();">hiiiiiiiiiiii</div>