Image src relative path to absolute path

Question

I have website and now making a hybrid app for it. I get all my blog post using Jquery get method. However the issue is that < img src="/media/image.png"> is sometime relative url and sometime an absolute url.

Everytime an absolute url breaks the image showing 404 error.

How to write Jquery function to find if src is absolute and change it to

https://www.example.com/media/image.png

I will not be able to provide any code samples I have tried since I am not a front end developer and tried whole day solving it.

Note: I need to change images present only in <div id="details"> div.

Answer 1

You should always use same path for all the images, but as of your case you can loop through images and append the domain, as of the use case I have added the domain in variable you can change it as per your requirement.

You can use common function or image onload to rerender but I h

Note: image will rerender once its loaded.

 var imageDomain = "https://homepages.cae.wisc.edu/~ece533/"; //javascript solution // window.onload = function() { // var images = document.getElementsByTagName('img'); // for (var i = 0; i < images.length; i++) { // if (images[i].getAttribute('src').indexOf(imageDomain) === -1) { // images[i].src = imageDomain + images[i].getAttribute('src'); // } // } // } //jquery solution var b = 'https://www.example.com'; $('img[src^="/media/"]').each(function(e) { var c = b + $(this).attr('src'); $(this).attr('src', c); }); //best approach you are using get request //assuming you are getting this respone from api var bArray = ["https://www.example.com/media/image.png", "/media/image.png"] var imgaesCorrected = bArray.map(a => { if (a.indexOf(b) === -1) { a = b+a; } return a; }); console.log(imgaesCorrected);

 img { width: 50px }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="/media/image.png"> <img src="https://www.example.com/media/image.png">

Answer 2

document.querySelectorAll('#details img').forEach(img => {
  const src = img.getAttribute('src');
  // use regex, indexOf, includes or whatever to determine you want to replace the src
  if (true) {
    img.setAttribute('src', 'https://www.example.com' + src);
  }
});

Answer 3

The best would be to do this with the response html from the ajax request before inserting into the main document so as to prevent needless 404 requests made while changing the src

Without seeing how you are making your requests or what you do with the response here's a basic example using $.get()

$.get(url, function(data){
    var $data = $(data);
    $data.find('img[src^="/media/"]').attr('src', function(_,existing){
       return 'https://www.example.com' + existing
    });

    $('#someContainer').append($data)'

})

Answer 4

You can just get all the images from an object and find/change them if they don't have absolute url.

 var images = $('img'); for (var i = 0 ; i < images.length ; i++) { var imgSrc = images[i].attributes[0].nodeValue; if (!imgSrc.match('^http')) { imgSrc = images[i].currentSrc; console.info(imgSrc); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <img src="/media/test.jpg"> <img src="/media/test.jpg"> <img src="https://www.example.com/media/test.jpg">