【问题标题】：Changing the image source using jQuery使用 jQuery 更改图像源
【发布时间】：2010-10-07 22:40:00
【问题描述】：

我的 DOM 如下所示：

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

当有人点击图片时，我希望图片 src 更改为 <img src="imgx_off.gif"> 其中x 代表图片编号 1 或 2。

这是可能的还是我必须使用 CSS 来更改图像？

【问题讨论】：

如果您想要使用 jQuery 的东西，您可能需要查看 jQuery Cycle Plugin, demo scrollRight（右下示例）
jQuery("#my_image").attr("src", "first.jpg")
你真的应该接受 jonstjohn 的回答 :) 问题和答案的赞成票数表明很多人都遇到过这个问题。得到一个被接受的答案会改善问题。
截至日期，即19th July, 2016 15:39 PM，问题支持计数 369 和 @jonstjohn 回答支持计数 931。但是，真倒霉，@OP 在Feb 17 '09 at 2:57 之后没有登录。 :( 并且，@jonstjohn 回答保持未标记。
@Xcelled，唯一的问题是 jonstjohn 的回答没有回答这个问题。这是一个小问题，但值得一提。看看 inco 的答案，因为它是这里唯一真正正确回答问题的答案。

标签： javascript jquery image

【解决方案1】：

我在这里制作了一个具有此功能的代码笔。我也会在这里给你分解代码。

Codepen

$(function() {

  //Listen for a click on the girl button
  $('#girl-btn').click(function() {

    // When the girl button has been clicked, change the source of the #square image to be the girl PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/girl.png");
  });

  //Listen for a click on the plane button
  $('#plane-btn').click(function() {

    // When the plane button has been clicked, change the source of the #square image to be the plane PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/airplane.png");
  });

  //Listen for a click on the fruit button
  $('#fruits-btn').click(function() {

    // When the fruits button has been clicked, change the source of the #square image to be the fruits PNG
    $('#square').prop("src", "https://homepages.cae.wisc.edu/~ece533/images/fruits.png");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<img src="https://homepages.cae.wisc.edu/~ece533/images/girl.png" id="square" />
<div>
  <button id="girl-btn">Girl</button>
  <button id="plane-btn">Plane</button>
  <button id="fruits-btn">Fruits</button>

  <a href="https://homepages.cae.wisc.edu/~ece533/images/">Source of Images</a>
</div>

【讨论】：

【解决方案2】：

简短但准确

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );

let pic=[
  "https://picsum.photos/id/237/40/40", // arbitrary - eg: "img1_on.gif",
  "https://picsum.photos/id/238/40/40", // arbitrary - eg: "img2_on.gif"
];

$("#d1 img").click(e=> e.target.src= pic[e.target.src.match(pic[0]) ? 1:0] );

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

【讨论】：

【解决方案3】：

如果您多次更新图像并且它被 CACHED 和不更新，在最后添加一个随机字符串：

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());

【讨论】：

在末尾添加随机字符串非常重要，至少对我而言！坦克！

【解决方案4】：

你应该给你的图片标签添加 id 属性，像这样：

<div id="d1">
   <div class="c1">
            <a href="#"><img id="img1" src="img1_on.gif"></a>
            <a href="#"><img id="img2" src="img2_on.gif"></a>
   </div>
</div>

那么您可以使用此代码更改图像的来源：

 $(document).ready(function () {
        $("#img1").attr({ "src": "logo-ex-7.png" });
        $("#img2").attr({ "src": "logo-ex-8.png" });
    });

【讨论】：

【解决方案5】：

使用jQueryclick()更改图片源

元素：

    <img class="letstalk btn"  src="images/chatbuble.png" />

代码：

    $(".letstalk").click(function(){
        var newsrc;
        if($(this).attr("src")=="/images/chatbuble.png")
        {
            newsrc="/images/closechat.png";
            $(this).attr("src", newsrc);
        }
        else
        {
            newsrc="/images/chatbuble.png";
            $(this).attr("src", newsrc);
        }
    });

【讨论】：

【解决方案6】：

这是在 Vanilla（或简称为纯）JavaScript 中完成它的有保证的方法：

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;

【讨论】：

【解决方案7】：

希望这可以工作

<img id="dummyimage" src="http://dummyimage.com/450x255/" alt="" />
<button id="changeSize">Change Size</button>

$(document).ready(function() {
    var flag = 0;
    $("button#changeSize").click(function() {
        if (flag == 0) {
            $("#dummyimage").attr("src", "http://dummyimage.com/250x155/");
            flag = 1;
        } else if (flag == 1) {
            $("#dummyimage").attr("src", "http://dummyimage.com/450x255/");
            flag = 0;
        }
    });
});

【讨论】：

虽然这段代码 sn-p 可以解决问题，including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。
谢谢 Derek 下次以后会把这件事记在心里

【解决方案8】：

只是一个补充，让它变得更小：

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});

【讨论】：

【解决方案9】：

您可以使用 jQuery 的 attr() 函数。例如，如果您的img 标记具有“my_image”的id 属性，您可以这样做：

<img id="my_image" src="first.jpg"/>

然后你可以像这样用jQuery改变你的图片的src：

$("#my_image").attr("src","second.jpg");

要将其附加到click 事件，您可以编写：

$('#my_image').on({
    'click': function(){
        $('#my_image').attr('src','second.jpg');
    }
});

要旋转图像，您可以这样做：

$('img').on({
    'click': function() {
         var src = ($(this).attr('src') === 'img1_on.jpg')
            ? 'img2_on.jpg'
            : 'img1_on.jpg';
         $(this).attr('src', src);
    }
});

【讨论】：

【解决方案10】：

我在尝试调用重新验证码按钮时遇到了同样的问题。经过一番搜索，现在以下功能在几乎所有著名的浏览器（chrome、Firefox、IE、Edge、...）上都可以正常工作：

function recaptcha(theUrl) {
  $.get(theUrl, function(data, status){});
  $("#captcha-img").attr('src', "");
  setTimeout(function(){
       $("#captcha-img").attr('src', "captcha?"+new Date().getTime());
  }, 0);
 }

'theUrl' 用于渲染新的验证码图像，在您的情况下可以忽略。最重要的一点是生成新的 URL，它会强制 FF 和 IE 重新渲染图像。

【讨论】：

【解决方案11】：

了解更多信息。我尝试在 jquery 中使用 attr 方法为广告图像设置 src 属性，例如：$("#myid").attr('src', '/images/sample.gif');

此解决方案很有用且有效，但如果更改路径也会更改图像路径并且无法正常工作。

我一直在寻找解决此问题的方法，但一无所获。

解决方案是将“\”放在路径的开头： $("#myid").attr('src', '\images/sample.gif');

这个技巧对我非常有用，我希望它对其他人有用。

【讨论】：

【解决方案12】：

无法使用 CSS 更改图像源。

唯一可能的方法是使用Javascript 或任何Javascript 库，如jQuery。

逻辑-

图像位于 div 中，并且该图像没有 class 或 id。

因此逻辑将选择图像所在的div 内的元素。

然后用循环选择所有图像元素，并用Javascript/jQuery更改图像src。

带有演示输出的示例代码-

$(document).ready(function()
{
    $("button").click(function()
    {
      $("#d1 .c1 a").each(function()
      {
          $(this).children('img').attr('src', 'https://www.gravatar.com/avatar/e56672acdbce5d9eda58a178ade59ffe');
      });
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<div id="d1">
   <div class="c1">
            <a href="#"><img src="img1_on.gif"></a>
            <a href="#"><img src="img2_on.gif"></a>
   </div>
</div>

<button>Change The Images</button>

【讨论】：

【解决方案13】：

我今天也有同样的奇观，我就是这样做的：

//<img src="actual.png" alt="myImage" class=myClass>
$('.myClass').attr('src','').promise().done(function() {
$(this).attr('src','img/new.png');  
});

【讨论】：

【解决方案14】：

人们在更改图像源时常犯的错误之一是没有等待图像加载来执行后续操作，例如使图像大小成熟等。图片加载后，你需要使用 jQuery .load() 方法来做一些事情。

$('yourimageselector').attr('src', 'newsrc').load(function(){
    this.width;   // Note: $(this).width() will not work for in memory images

});

编辑原因：https://stackoverflow.com/a/670433/561545

【讨论】：

是的。这终于成功了。 .destroy() 远远不够。在换出各种大小的图像等时，对所有 html 进行核对而不是 init 再次起作用。
请注意，加载不会可靠地触发，特别是如果图像在缓存中。请参阅 jQuery 文档。

【解决方案15】：

如果不仅有 jQuery 或其他资源杀戮框架 - 每个用户每次下载许多 kb 只是为了一个简单的技巧 - 而且还有原生 JavaScript（！）：

<img src="img1_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img1_off.jpg':'img1_on.jpg';">
<img src="img2_on.jpg" 
    onclick="this.src=this.src.match(/_on/)?'img2_off.jpg':'img2_on.jpg';">

这可以写得更笼统，更优雅：

<html>
<head>
<script>
function switchImg(img){
    img.src = img.src.match(/_on/) ? 
        img.src.replace(/_on/, "_off") : 
        img.src.replace(/_off/, "_on");
}
</script>
</head>
<body>
    <img src="img1_on.jpg" onclick="switchImg(this)">
    <img src="img2_on.jpg" onclick="switchImg(this)">
</body>
</html>

【讨论】：

令我惊讶的是，有多少人无法阅读问题并给出所要求的答案。对我（和你）来说，问题似乎很明显是在寻找一个通用的解决方案，这就是为什么 OP 给出了 2 个例子。然而其他人似乎不仅完全错过了它，而且给出了一个甚至没有回答问题的答案。 :(

【解决方案16】：

你也可以用 jQuery 这样做：

$(".c1 img").click(function(){
     $(this).attr('src','/new/image/src.jpg');   
});

如果图像源有多个状态，则可以有条件。

【讨论】：

这个语法不对。 jquery attr() 函数需要 1 或 2 个参数。第一个是带有 HTML 属性名称的字符串，第二个是您要设置的该属性的值。

【解决方案17】：

我将向您展示如何更改图像src，这样当您单击图像时，它会在您的 HTML 中的所有图像中旋转（特别是在您的d1 id 和 c1 类中）。 .. 您的 HTML 中是否有 2 个或更多图片。

我还将向您展示如何在文档准备好后清理页面，以便最初只显示一张图像。

完整代码

$(function() {

    var $images = $("#d1 > .c1 > a").clone();  

    var $length = $images.length;
    var $imgShow = 0;

    $("#d1 > .c1").html( $("#d1 > .c1 > a:first") );  

    $("#d1 > .c1 > a").click(function(event) { 

        $(this).children().attr("src", 
                        $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();

    });
});

细分

创建包含图像的链接的副本（注意：您还可以使用链接的 href 属性来增加功能...例如 display the working link below each image）：
```
    var $images = $("#d1 > .c1 > a").clone();  ;
```
检查 HTML 中有多少图像并创建一个变量来跟踪正在显示的图像：
```
var $length = $images.length;
var $imgShow = 0;
```
修改文档的 HTML，以便仅显示第一张图片。删除所有其他图像。
```
$("#d1 > .c1").html( $("#d1 > .c1 > a:first") ); 
```
当点击图片链接时绑定一个函数来处理。
```
    $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });
```
上述代码的核心是使用++$imgShow % $length 循环浏览包含图像的jQuery 对象。 ++$imgShow % $length 首先将我们的计数器加一，然后根据图像的数量修改该数字。这将使生成的索引从0 循环到length-1，这是$images 对象的索引。这意味着此代码将适用于 2、3、5、10 或 100 张图片...按顺序循环浏览每张图片，并在到达最后一张图片时从第一张图片重新开始。

另外，.attr()用于获取和设置图片的“src”属性。为了从$images 对象中挑选元素，我使用$(selector, context) 的形式将$images 设置为jQuery context。然后我使用 .eq() 只选择具有我感兴趣的特定索引的元素。

jsFiddle example with 3 images

您还可以将srcs 存储在一个数组中。
jsFiddle example with 3 images

以下是如何将来自锚标记的 href 合并到图像周围：
jsFiddle example

【讨论】：