javascript - 多图片src路径切换

Question

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

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

现在，我计划在两种项目模式“Mode-1”和“Mode-2”之间切换。根据当前事件模式，我需要切换图像的 src 路径(图像名称相同，只是需要更改路径)。

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

例如

当事件模式为:“Mode-1”时

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

当事件模式变为:“Mode-2”时

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

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

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

Answer 1

这是一种 Angular 的方法:

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在这里，比代码片段更具可读性。

<小时/>

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