javascript - JavaScript 中相对于绝对图像 src

Question

我需要将页面上所有图像的所有 src 属性从相对 url 转换为绝对，因此基本上只需在当前 src 上添加基本 url。

我知道如何使用 jQuery 来做到这一点，但我需要使用纯 JS 来做到这一点。

有什么例子或想法如何做到这一点？

在 jQuery 中我会这样做:

$('img').each(function() {
  var urlRelative = $(this).attr("src");
  var urlAbsolute = 'https://example.com' + urlRelative;
  $(this).attr("src", urlAbsolute);
});

Answer 1

您可以使用 document.getElementsByTagName() 获取所有图像标签，然后只需迭代它们中的每一个并附加您的基本 url。

var images = document.getElementsByTagName('img');
const baseUrl = "https://myurl.com/"
Array.from(images).forEach(function(ele){
  ele.src = baseUrl + ele.getAttribute("src");
});

<img src="smiley1.gif" alt="Smiley face1">
<img src="smiley2.gif" alt="Smiley face2">
<img src="smiley3.gif" alt="Smiley face3">
<img src="smiley4.gif" alt="Smiley face4">