Question

我有网站，现在正在为其制作混合应用程序。我使用Jquery get方法获取所有博客文章。但是，问题在于<conda update ipykernel有时是相对URL，有时是绝对URL。

每次使用绝对网址都会破坏显示404错误的图片。

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

img src="/media/image.png">

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

注意：我需要更改仅在https://www.example.com/media/image.png格中显示的图像。

Answer 1

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

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

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

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

最好是在插入主文档之前使用ajax请求的响应html进行此操作，以防止在更改src时发出不必要的404请求

这是一个使用$.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

您可以从对象中获取所有图像，并在没有绝对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">

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

4 个答案: