javascript - jQuery 在 img src 属性中添加 URL

Question

我只需要一个 jQuery 片段来在 img src 中添加前缀，即

<img src='/img/picture1.jpg' />

代码片段 jQuery 是在这个 url 前面加上

http://cdn.something.com/ 

所以在 jQuery 片段之后，它变成了

<img src='http://cdn.something.com/img/picture1.jpg' />

非常感谢任何帮助。

到目前为止我写了类似的东西

$().ready(function(){
     var cdn ='http://cdn.something.com';
   $('img').attrib('src', cdn);

});

但是它被替换为 src 而不是 pre

Answer 1

它与 jQuery 无关，无论如何你可以用 .attr() 来做 ^{what is that?} :

$('img').attr('src', function(index, src) {
     return 'http://cdn.something.com' + src;
});

这会影响您所有的 <img>标记中的节点并替换 src .

无论如何，我不太确定这是个好主意。当时DOMready事件触发，浏览器可能已经尝试访问 old源属性。如果您必须在 Javascript 中执行此操作，那么存储 path info 可能是更好的主意。在定制内 data attribute所以浏览器不会试图加载图像。这可能看起来像:

HTML

<img src='' data-path='/img/picture1.jpg' />

JS

$(function() {
    $('img').attr('src', function(index, src) {
       return 'http://cdn.something.com' + this.getAttribute('data-path');
    });
});

这应该可以做到。你可以替换 this.getAttribute()通过 $(this).data('path')因为 jQuery 解析那些 data attributes进入它的“节点”数据哈希。但这会创建另一个 jQuery 对象，此时确实没有必要。