图像src相对路径到绝对路径

Sapna Sharma

我有网站，现在正在为其制作混合应用程序。我使用Jquery get方法获取所有博客文章。但是，问题在于<img src="/media/image.png">有时是相对URL，有时是绝对URL。

每次绝对URL破坏显示404错误的图像。

如何编写Jquery函数以查找src是否为绝对并将其更改为

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

由于我不是前端开发人员并且试图整日解决问题，因此我将无法提供我尝试过的任何代码示例。

注意：我需要更改仅存在于<div id="details">div中的图像。

只是代码

您应该始终对所有图像使用相同的路径，但是从您的情况来看，您可以循环浏览图像并追加域，从用例开始，我已经在变量中添加了域，可以根据需要进行更改。

您可以使用通用功能或图像加载重新渲染，但我

注意：图片加载后将重新呈现。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。