Question

目前，我的应用程序中的所有HTML文件都具有指向某个目录的硬编码相对图像路径。例如，

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

现在，我计划在两种项目模式之间切换＆＃39; Mode-1＆＃39; ＆安培; ＆＃39;模式2＆＃39 ;.基于当前活动模式，我需要切换图像的src路径（图像名称将相同，只需要更改路径）。

如何编写可配置的src路径，这样我就可以将目录切换到某个预定义的路径，而不必每次都更改HTML。

例如

当激活模式为：＆＃39;模式-1＆＃39;

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

当活动模式变为：＆＃39;模式-2＆＃39;

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

我已准备好更改所有HTML文件一次。

我在我的应用程序中使用jQuery和AngularJS。

Answer 1

以下是一种Angular方法：

＆＃13;

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'
  }];
}]);

＆＃13;

<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>

＆＃13;

JSFiddle demo此处，比摘录更具可读性。

这里的优点是你可以非常轻松地添加模式，只需推送数组中的更多项目。

Answer 2

您确定应用中有一些代码可以确定应用运行的模式。您可以执行以下操作：

＆＃13;

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

＆＃13;

Answer 3

我建议使用基于div类的图像，并根据运行应用程序的模式切换div类。这是简单的java脚本jQuery示例

根据您的要求，在模式更改后更改onclick to function call ..

＆＃13;

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");
    }
}

＆＃13;

.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*/
  }

＆＃13;

<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>

＆＃13;

在多个图像src路径之间切换

3 个答案: