2

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.

Sapna Sharma
  • 722
  • 1
  • 8
  • 19

4 Answers4

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">
Just code
  • 13,553
  • 10
  • 51
  • 93
  • Would be better to fix this in the ajax request before adding to the dom to prevent lots of bad requests. Definitely won't work in `onload` – charlietfl Dec 02 '18 at 12:40
  • If I understand you, you mean once content loaded from ajax I should apply this function right? I think the way will be same OP can change as per his requirement. – Just code Dec 02 '18 at 12:41
  • 2
    I'm saying fix it in the html string in `$.get` response – charlietfl Dec 02 '18 at 12:43
  • @Justcode Thanks. Can you put it in Jquery? Right now I came with this solution `var a = $('#details img[src^="/media/"]').attr('src'); var b = 'https://www.example.com'; var c = b+a; $('#details img[src^="/media/"]').attr('src',c);` – Sapna Sharma Dec 02 '18 at 12:43
  • But dont thing it can change all images in a post as right now I had only single image. – Sapna Sharma Dec 02 '18 at 12:43
  • @SapnaSharma posted jquery solution – Just code Dec 02 '18 at 12:48
  • @charlietfl ok I see what you mean, that should be a solution too. – Just code Dec 02 '18 at 12:49
  • @SapnaSharma I have added 3 approaches I still will go with the 3rd approach to go with getting api response and changing it and then using it. – Just code Dec 02 '18 at 12:54
  • @Justcode This solves the issue please correct one line so I can accept answer. `var c = b + "/" + $(this).attr('src');` should be `var c = b + $(this).attr('src');` – Sapna Sharma Dec 02 '18 at 12:57
1
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);
  }
});
neaumusic
  • 10,027
  • 9
  • 55
  • 83
1

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)'

})
charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • I make getJson to receive data and then put post content in #details div. You are right, it do make multiple requests. `$.getJSON("https://www.example.com/developers/getdataapi/",{ newsid: newsvalueid}, function(result){ $('#heading').html(result.title); $('#details').html(result.detail); ` – Sapna Sharma Dec 02 '18 at 13:01
  • Ok so `var $data = $(result.detail)`. Then clean up images in `$data` and do `$('#details').html($data)` – charlietfl Dec 02 '18 at 13:04
0

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">
Alex Bntz
  • 124
  • 9