替换img路径jquery答案

【问题标题】：Replace img path jquery替换img路径jquery
【发布时间】：2017-03-09 14:48:21
【问题描述】：

我正在尝试替换 jquery 中的 img 路径（注入远程页面）

替换 example.com/thumbs

与 example.com/图片

我试过了，但是好像没用。

 $("img").attr("src").replace("thumbs", "images");

【问题讨论】：

Changing the image source using jQuery的可能重复

标签： javascript jquery dom

【解决方案1】：

这个获取值，但没有设置回属性：

$("img").attr("src").replace("thumbs", "images");

这需要另一个步骤，例如：

var newSrc = $("img").attr("src").replace("thumbs", "images");
$("img").attr("src", newSrc);

或者，如果你想要一行：

$("img").attr("src", $("img").attr("src").replace("thumbs", "images"));

【讨论】：

【解决方案2】：

看看这个，你没有为图片设置 src。

$(function() {
      $('img').each(function() {
          $(this).attr('src', $(this).attr('src').replace('thumbs', 'imagessss')); console.log('New src: ' + $(this).attr('src'));
          });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="/images/thumbs.png" />

【讨论】：

【解决方案3】：

var oldSrc = 'http://example.com/smith.gif';
var newSrc = 'http://example.com/johnson.gif';
$('img[src="' + oldSrc + '"]').attr('src', newSrc);

这就是你想做的：

【讨论】：

【解决方案4】：

 
 var newPath = $("img").attr("src").replace("thumbs", "images");
  $("img").attr("src",newPath);

【讨论】：

【解决方案5】：

您需要使用返回值更新属性，因为您可以使用回调函数作为attr() 方法中的第二个参数，其中第二个参数保存当前属性值。

$('img').attr('src', function(i, src){ 
   return src.replace('thumbs', 'images'); 
});

如果有多个img元素，上述方法将遍历img标签，因此您可以避免使用each()方法进行迭代。

setTimeout(function() {
  $('img').attr('src', function(i, src) {
    return src.replace('thumbs', 'images');
  });
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="http://img.pranavc.in/100?t=thumbs" alt="#" />
<img src="http://img.pranavc.in/100?t=thumbs1" alt="#" />
<img src="http://img.pranavc.in/100?t=thumbs2" alt="#" />
<img src="http://img.pranavc.in/100?t=thumbs3" alt="#" />
<img src="http://img.pranavc.in/100?t=thumbs4" alt="#" />
<img src="http://img.pranavc.in/100?t=thumbs5" alt="#" />
<img src="http://img.pranavc.in/100?t=thumbs6" alt="#" />

【讨论】：

【解决方案6】：

第 1 步：脚本 src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
第 2 步：

    $(document).ready(function(){
         $('img').each(function() {
               $(this).attr('src', $(this).attr('src').replace('thumbs', 'images')); 
               console.log('Latest image link ' + $(this).attr('src'));
           });
      });

【讨论】：