Question

我需要将页面上所有图像的所有src属性从相对url转换为absolute，所以基本上只需要在当前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()获取所有图片代码，然后只需遍历其中每个图片并附加您的基本网址。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

这对你有帮助吗？

const BASE_URL = "http://example.com";    //define your new base url
var elements =    document.getElementsByTagName("img");    //create an array with the tag selector

for (var i = 0; i < elements.length; i++) {    //loop through all elments in the array and change the src
   var oldSrc = elements[i].src;
   elements[i].src=BASE_URL + oldSrc;
}

Answer 3

希望这有助于你

var base_url = 'your_site/path_to_images'
var images = document.getElementsByTagName( 'img' );

function toArray(obj) {
  var array = [];
  // iterate backwards ensuring that length is an UInt32
  for (var i = obj.length >>> 0; i--;) { 
    array[i] = obj[i];
  }
  return array;
}


images = toArray( images );
var src, last;

for ( var i = 0, len = images.length; i < len; i += 1  ) {
    src = images[i].getAttribute( 'src' );
    last = src.lastIndexOf('/');
    src = src.substr( last + 1 );
    images[i].setAttribute( 'src', base_url + src );
}

toArray函数来自here。

相对于JavaScript中的绝对图像src

3 个答案: