使用jQuery更改图像源

761

我的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来更改图像？

javascript  jquery  image 
— 用户名
source
如果您想使用jQuery，则可能需要研究jQuery Cycle Plugin，演示scrollRight（右下示例）
— TomHastjarjanto
43
jQuery（“＃my_image”）。attr（“ src”，“ first.jpg”）
— manish nautiyal 2014年
9
您应该真的接受jonstjohn的回答：）在问题和答案上都进行投票的人数表明，很多人都遇到了这个问题。得到一个可接受的答案将会改善这个问题。
— Xcelled 2014年
4
到日期19th July, 2016 15:39 PM为止，即问题投票数369和@jonstjohn回答投票数931。但是，运气不好，@OP之后没有登录Feb 17 '09 at 2:57。:(并且，@ jonstjohn答案保持未标记。
— Nana Partykar '16
@Xcelled，唯一的问题是jonstjohn的答案无法回答问题。这是次要的，但值得一提。看一下inco的答案，因为它是这里唯一能正确回答问题的答案。
— David Newcomb '18年

Answers:

1686

您可以使用jQuery的attr（）函数。例如，如果img标签的id属性为“ my_image”，则可以执行以下操作：

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

然后，您可以src像这样使用jQuery 更改图片的：

$("#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);
    }
});
— 永斯特约翰
source
79

人们在更改图像源时常犯的常见错误之一是不等待图像加载来执行后续操作，例如图像尺寸到期等.load()。在图像加载后，您将需要使用jQuery 方法进行处理。

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

});

修改原因：https：//stackoverflow.com/a/670433/561545

— 莫森
source
是。这终于成功了。.destroy（）不够近。换出各种大小的图像时，对所有html进行核对，然后再对init进行再次实际工作。
— Matt J.
请注意，负载无法可靠触发，尤其是在映像位于缓存中的情况下。请参阅jQuery文档。
— Twilite 2014年
19

欲获得更多信息。我尝试使用以下语法在广告图片的jquery中使用attr方法设置src属性：$("#myid").attr('src', '/images/sample.gif');

此解决方案很有用，并且可以使用，但是如果更改路径，则图像的路径也会更改而无法使用。

我正在寻找解决此问题的方法，但没有发现任何问题。

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

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

— wphonestudio
source
18

如果不仅有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>
— 英科
source
总是让我感到惊讶的是，有多少人看不懂问题并给出所要求的答案。在我（和您）看来，问题似乎是在寻找通用解决方案，这就是为什么OP给出了两个示例。然而，其他所有人似乎不仅完全错过了答案，而且给出了甚至没有回答问题的答案。：（
— David Newcomb '18年
17

我将向您展示如何更改图像src，从而使您在单击图像时可以在HTML中的所有图像（特别是在d1id和c1class中）中旋转...无论您的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();

    });
});

细目

  1. 创建包含图像的链接的副本（注意：您还可以利用链接的href属性来增加功能……例如，在每个图像下方显示工作链接）：

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

  2. 检查HTML中有多少图像，并创建一个变量来跟踪显示的图像：

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

  3. 修改文档的HTML，以便仅显示第一张图像。删除所有其他图像。

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

  4. 绑定一个函数以在单击图像链接时进行处理。

        $("#d1 > .c1 > a").click(function(event) { 
        $(this).children().attr("src", $("img", $images).eq(++$imgShow % $length).attr("src") );
        event.preventDefault();
    });

    上面代码的核心是++$imgShow % $length用来循环浏览包含图像的jQuery对象。++$imgShow % $length首先将我们的计数器加1，然后将其修改为具有多少图像的数量。这将使结果索引从循环0到length-1，即$images对象的索引。这意味着此代码将适用于2、3、5、10或100张图像...依次循环浏览每个图像，并在到达最后一个图像时在第一个图像处重新开始。

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

带有3张图片的jsFiddle示例


您也可以将srcs 存储在数组中。
带有3张图片的jsFiddle示例

这是如何结合图像周围的定位标记的hrefs：
jsFiddle示例

— 彼得·阿吉泰
source
17

希望这可以工作

<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;
        }
    });
});
— Zeeshan
source
尽管此代码段可以解决问题，但提供说明确实有助于提高您的帖子质量。请记住，您将来会为读者回答这个问题，而这些人可能不知道您提出代码建议的原因。
— 德里克·布朗
感谢德里克（Derek）从下次开​​始将这件事牢记在心
— Zeeshan
14

您应该将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" });
    });
— 位图先生
source
9

您也可以通过以下方式使用jQuery：

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

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

— 费尔南多·埃舍尔
source
5
此语法不正确。jQuery attr（）函数采用1或2个参数。第一个是具有HTML属性名称的字符串，第二个是您要设置的属性的值。
— Thiago Silva
7

我在尝试重新输入验证码按钮时遇到了同样的问题。经过一番搜索，现在以下功能在几乎所有著名的浏览器（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重新渲染图像。

— 凯文·泰拉尼（Kayvan Tehrani）
source
7

使用jQuery更改图像源 click()

元件：

    <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);
        }
    });
— 阿披吉·波加里（Abhijit Poojari）
source
7

如果您多次更新图像并且图像被缓存并且不更新，请在末尾添加一个随机字符串：

// update image in dom
$('#target').attr('src', 'https://example.com/img.jpg?rand=' + Math.random());
— 金黑
source
1
至少对我而言，在末尾添加随机字符串非常重要！坦克！
— Marcelo Sader
3

我今天也有同样的疑问，我是这样做的：

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

这是在Vanilla（或简称为Pure）JavaScript中完成任务的保证方式：

var picurl = 'pictures/apple.png';
document.getElementById("image_id").src=picurl;
— 雷蒙·瓦加（Raymond Wachaga）
source
1

只是增加一点，使其更小： 

$('#imgId').click(function(){
    $(this).attr("src",$(this).attr('src') == 'img1_on.gif' ? 'img1_off.gif':'img1_on.gif');
});
— 塞勒·拉霍斯（SzélLajos）
source
-1

无法使用CSS更改图像源。

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

逻辑-

图像在div内，没有图像class或id带有该图像。

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

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

带演示输出的示例代码-

$(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>
展开摘要

— 阿布拉·贾欣（Abrar Jahin）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.