Antonio Ortiz Antonio Ortiz - 2 months ago 6
Javascript Question

Is there a way to explicitly change an images source path using JavaScript?

An HTML page handed off to me which originally have a image path which look something like this...

<img src="img/foo.jpg"


simply need to be changed to a new path.

I have a loop which goes through the collection of images:

container_images = container.getElementsByTagName('img');
imgSrc = /img\//gi,

for (var i = 0; i < container_images.length; i++) {
var images = container_images[i];

if (images.src.indexOf('img') !== -1) {
images.src = images.src.replace(imgSrc, 'new/path/here/');
}
}


Now this works perfectly locally however when I run this on my company's QAF server, it appears the server is adding a dev path:

<img src="http://ryelxusecqcm1.rye.com:8080/us-home/tools/img/foo.gif">


So is there a method other than
.replace
which can explicitly wipe out and the old path and put my new path? i.e.
'new/path/here/'

Answer

I found such a simple but elegant solution. Instead of testing for a string with indexOf (which would've worked if I didn't have two different environments), I went for a solution which is more direct.

images.src = '/dam/avon-us/landing-pages/rep-news/' +  images.src.split('/').pop();

This first coverts the image path/string to a collection of items in an array, delineated by the forward slash. ['current', 'path', 'foo.jpg'] Then using the pop method return just the last item in the array, which is the file name & extension. foo.jpg and then we simply prepend the path we want the image to have!

Want to say thanks for all the folks who tried to help me!