如何根据两个不同的环境更改images src属性？

Question

I have a HTML page which contain a collection of images which all have a specific path prefixed to them, img .

<img src="img/foo.gif" >
<img src="img/bar.gif" >
<img src="img/baz.gif" >

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

Thus when my if block fires:

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

I will get :

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

Is there a way I test for both environments?

Thanks in advance!

UPDATE Oscar kindly added a solution involving location.protocol and location.host This is what I came up with:

var root = location.protocol + '//' + location.host + '/',
           emailUrl = /img/gi,
           ewemailUrl = root + emailUrl;

    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(newemailUrl, '/new/path/here/');
            }
    }

But that doesn't work. In his answer he did away with the .replace method, but looks like he forgot a piece. Can anyone help me get it over the finish line?

if (images.src.indexOf('img') !== -1) {
    images.src = images.src = location.protocol + '//' + location.host +  'new/path/here/');
}

Answer 1

You could use :

if (images.src.indexOf('img') !== -1) {
    images.src = images.src = location.protocol + '//' + location.host +  'new/path/here/');
}

Prepending hostname and protocol to to your images folder variable will make it machine agnostics.

Also, if you have some kind of config system in your application, add this value as a settable key in that config system.