javascript - Image src relative path to absolute path - Stack Overflow

admin管理员组

文章数量:1026989

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

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

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./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.

• javascript
• jquery

Share Improve this question Follow asked Dec 2, 2018 at 12:14 Sapna SharmaSapna Sharma 75411 gold badge99 silver badges2121 bronze badges 8

• 1 /media/image.png should always work, it is absolute. You must have some that don't have leading / like src="media/image.png" which is relative. Can you fix the source? – charlietfl Commented Dec 2, 2018 at 12:28
• @charlietfl If it is on same domain it work. I am working on a hybrid app so need to change to url with domain name. It works perfectly on my website but not on app since it is not on same domain. – Sapna Sharma Commented Dec 2, 2018 at 12:28
• I am using Jquery to get post content of a blog post. It gives relative urls which works on website since it is in same domain and file system. But on app it is giving 404 error. – Sapna Sharma Commented Dec 2, 2018 at 12:30
• So you are running this app on different domain than source of images? – charlietfl Commented Dec 2, 2018 at 12:31
• 1 Show example of the jQuery get request. Best to fix it there before inserting into page – charlietfl Commented Dec 2, 2018 at 12:45

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 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 mon 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.';
$('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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="/media/image.png">
<img src="https://www.example./media/image.png">

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.' + src);
  }
});

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.' + existing
    });

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

})

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./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./media/test.jpg">

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

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

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./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.

• javascript
• jquery

Share Improve this question Follow asked Dec 2, 2018 at 12:14 Sapna SharmaSapna Sharma 75411 gold badge99 silver badges2121 bronze badges 8

• 1 /media/image.png should always work, it is absolute. You must have some that don't have leading / like src="media/image.png" which is relative. Can you fix the source? – charlietfl Commented Dec 2, 2018 at 12:28
• @charlietfl If it is on same domain it work. I am working on a hybrid app so need to change to url with domain name. It works perfectly on my website but not on app since it is not on same domain. – Sapna Sharma Commented Dec 2, 2018 at 12:28
• I am using Jquery to get post content of a blog post. It gives relative urls which works on website since it is in same domain and file system. But on app it is giving 404 error. – Sapna Sharma Commented Dec 2, 2018 at 12:30
• So you are running this app on different domain than source of images? – charlietfl Commented Dec 2, 2018 at 12:31
• 1 Show example of the jQuery get request. Best to fix it there before inserting into page – charlietfl Commented Dec 2, 2018 at 12:45

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 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 mon 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.';
$('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./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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="/media/image.png">
<img src="https://www.example./media/image.png">

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.' + src);
  }
});

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.' + existing
    });

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

})

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./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./media/test.jpg">

本文标签： javascriptImage src relative path to absolute pathStack Overflow