Relative to absolute image src in JavaScript

Question

I need to convert all src attributes of all images on the page from relative url to absolute, so basically just to add the base url on the current src.

I know how to do that using jQuery, but I need to do it with pure JS.

Any example or idea how to do that?

In jQuery I'll do it like:

$('img').each(function() {
  var urlRelative = $(this).attr("src");
  var urlAbsolute = 'https://example.com' + urlRelative;
  $(this).attr("src", urlAbsolute);
});

How would you do it with jQuery? It shouldn't be much of a step to convert that to vanilla JS — Phil, Jul 24 '17 at 09:02
A little search leads to something like this https://www.w3schools.com/jsref/met_element_setattribute.asp — smarber, Jul 24 '17 at 09:03
So simply swap `$('img')` for `document.getElementsByTagName('img')`, `.each` for [`forEach`](https://developer.mozilla.org/en-US/docs/Web/API/NodeList/forEach), and `$(this).attr('src')` for `.src` — Phil, Jul 24 '17 at 09:11
Possible duplicate of [How to update relative img src tag to an absolute path using javascript](https://stackoverflow.com/questions/42568220/how-to-update-relative-img-src-tag-to-an-absolute-path-using-javascript) — Nikola Lukic, Jul 24 '17 at 09:13

score 1 · Accepted Answer · answered Jul 24 '17 at 09:08

You can get all images tag using document.getElementsByTagName(), then just iterate through each one of them and append your base url.

var images = document.getElementsByTagName('img');
const baseUrl = "https://myurl.com/"
Array.from(images).forEach(function(ele){
  ele.src = baseUrl + ele.getAttribute("src");
});

<img src="smiley1.gif" alt="Smiley face1">
<img src="smiley2.gif" alt="Smiley face2">
<img src="smiley3.gif" alt="Smiley face3">
<img src="smiley4.gif" alt="Smiley face4">

Colin · Answer 2 · 2017-07-24T09:54:35.613

0

Does this help you?

const BASE_URL = "http://example.com";    //define your new base url
var elements =    document.getElementsByTagName("img");    //create an array with the tag selector

for (var i = 0; i < elements.length; i++) {    //loop through all elments in the array and change the src
   var oldSrc = elements[i].src;
   elements[i].src=BASE_URL + oldSrc;
}

edited Jul 24 '17 at 09:54

answered Jul 24 '17 at 09:06

Colin

1,112
1
16
27

1

yes, but will it apply on each image on page? I think I should use `document.getElementsByTagName("img")` instead, and need to update current src with BASE_URL... – mixerowsky Jul 24 '17 at 09:11

kellymandem · Answer 3 · 2017-07-24T09:28:36.630

Hope this helps you

var base_url = 'your_site/path_to_images'
var images = document.getElementsByTagName( 'img' );

function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}


images = toArray( images );
var src, last;

for ( var i = 0, len = images.length; i < len; i += 1  ) {
    src = images[i].getAttribute( 'src' );
    last = src.lastIndexOf('/');
    src = src.substr( last + 1 );
    images[i].setAttribute( 'src', base_url + src );
}

The toArray function was gotten from here.

Relative to absolute image src in JavaScript

3 Answers3