使用Javascript/JQuery为img src添加前缀

Add prefix to img src with Javascript/JQuery

本文关键字：src 添加 加前缀 img Javascript JQuery 使用      更新时间：2023-09-26

如何为每个img src添加前缀？

<div id="div_1">
    <h1> Title 1 </h1>
    <div><img src="blah.jpg" /></div>
    <div><p> Lorem Ipsum </p></div>
</div>
<div id="div_2">
    <h1> Title 2 </h1>
    <div><img src="blah2.jpg" /></div>
    <div><p> Lorem Ipsum </p></div>
</div>
<div id="div_3">
    <h1> Title 3 </h1>
    <div><img src="blah3.jpg" /></div>
    <div><p> Lorem Ipsum </p></div>
</div>

每个img src都应该是这样的：

<img src="prefix/blah.jpg" />
<img src="prefix/blah2.jpg" />
<img src="prefix/blah3.jpg" />

jQuery:

使用jQuery更改页面上的所有图像http://jsfiddle.net/aamir/FnPd5/

$('img').each(function(){ this.src='prefix/'+this.src })

jQuery在div中查找图像的方法，从div_开始：http://jsfiddle.net/aamir/FnPd5/2/

jQuery("[id^='div_']").each(function(){
    var img = $(this).find('img')[0];
    img.src='prefix/'+img.src
})

香草Javascript

香草Javascript：http://jsfiddle.net/aamir/FnPd5/1/

var items = document.getElementsByTagName("img");
for (var i = items.length; i--;) {
    var img = items[i];
    img.src='prefix/'+img.src;
}

Vanilla Javascript，用于在以div_开头的div中查找图像：http://jsfiddle.net/aamir/FnPd5/3/

var divs = document.getElementsByTagName("div");
for(var i = 0; i < divs.length; i++) {
    if(divs[i].id.indexOf('div_') == 0) {
        var img = divs[i].getElementsByTagName("img")[0];
        img.src='prefix/'+img.src;
    }
}

演示此处

$("[id^='div_'] img").each(function(){
  var src = $(this).attr("src");
  var newSrc="prefix/"+src;
  $(this).attr("src",newSrc)
})

$(function(){
  $('img').each(function(i,e){
     $(e).attr('src','prefix/'+$(e).attr('src'));
  });
});

我的解决方案基于您的代码：

$(document).ready(function(){
$('div div img').each(function(){ 
   var imagen = $(this).attr('src') ;
   $(this).attr("src","prefix/"+imagen);
});
});

工作小提琴：http://jsfiddle.net/robertrozas/kR5ZW/

试试这个解决方案。

$('img').each(function(){
    var imgSrc = $(this).attr('src')
    $(this).attr('src','prefix/'+imgSrc);
})

Fiddle演示

另一个选项：

$('img').attr('src', function(ii, oldSrc) {
    return 'prefix/' + oldSrc;
});

function addPrefixToImg(prefix) {
    $( "img" ).each(function( index ) {
        this.src = prefix + this.src;
    });
}
addPrefixToImg('prefix/');

你可以在上测试http://jsfiddle.net/f32MQ/

相关文章：