CODEWITHSUNDEEP
javascriptjqueryhtmlangularjs
Arshad Rehmani
Arshad Rehmani

Reputation: 2185

Switch between multiple image src paths

Currently, all HTML files in my application are having hard coded relative image path pointing to some directory. For e.g.

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

Now, I'm planning to switch between two project modes 'Mode-1' & 'Mode-2'. Based on currently active mode, I need to switch the src path of images(image name will be same, just the path needs to be changed).

How to write a configurable src path which will enable me to switch the directories to some predefined path without having to change HTML each time.

For e.g.

When active Mode is: 'Mode-1'

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

When active Mode becomes: 'Mode-2'

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

I'm ready to change all HTML file once.

I use jQuery and AngularJS in my application.

Upvotes: 0

Views: 874

Answers (3)

Mistalis
Mistalis

Reputation: 18279

Here is an Angular way to do the trick:

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 here, more readable than the snippet.

The advantage here is that you can very easily add mode, just by pushing more items in the array.

Upvotes: 1

Gaurav B
Gaurav B

Reputation: 356

I will suggest using div class based images, and just switching class of div depending on mode in which you are running your application. this is simple java script jQuery example

change onclick to function call after mode change as per your requirement..

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>

Upvotes: 0

Flyer53
Flyer53

Reputation: 764

You sure have some code in your app that determines the mode the app is runnunig in. So you could do the following:

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

Upvotes: 0

Related Questions