如何使用 jQuery 设置图像 src

Posted 2023-03-15

【中文标题】如何使用 jQuery 设置图像 src

【英文标题】：How to set the image src using jQuery

【发布时间】：2011-01-12 02:31:18

【问题描述】：

我正在尝试使用 jQuery 更改图像 src 属性

jQuery("#imageID").attr('src','http://localhost:8080/images/1/myImage.png' );

使用上面的代码我可以改变 src 属性，但是当我尝试这个时：-

jQuery("#imageID").attr('src',jQuery("#imageBlock").css('background-image') );

我无法更改源代码。

提供

alert ( jQuery("#imageBlock").css('background-image') );

返回：

网址(http://localhost:8080/images/1/myImage.png)

编辑#1 就在我即将接受解决方案的时候。我必须说，几乎所有解决方案都适用于 FF。我试过了：

切片(4,-1); split("(")[1] > 然后替换 (")" , "");

我想其他人也会工作。但是没有一个解决方案在 IE 中有效。 原因是： 而FF返回：

网址(http://localhost:8080/images/1/myImage.png)

IE 返回：

url("http://localhost:8080/images/1/myImage.png")

^^ 注意这里的引号

现在，设置 src attr 的通用方法是什么。 IE浏览器是否需要测试一下？

这是工作代码。

var src = "";
    if ( jQuery.browser.msie ) 
        src = jQuery("#imageBlock").css('background-image').slice(5,-2);        
    else
        src = jQuery("#imageBlock").css('background-image').slice(4,-1);
       
    jQuery("#imageID").attr('src', src );

我真的不喜欢它：x。如果有其他解决方案，请告诉我，否则我将立即接受slice 解决方案。

【问题讨论】：

[This][1] 简单明了。 [1]：***.com/questions/18867735/…

【参考方案1】：

需要提取url部分：

var backgroundImage = $("#imageBlock")
    .css('backgroundImage')
    .replace(/"/g,"")
    .replace(/url\(|\)$/ig, "");
jQuery("#imageID").attr('src', backgroundImage);

【讨论】：

顺便说一句，这是replace(/url\(|\)$/ig, "");

它将字符串的 url() 部分替换为“”，以便您自己获取图像的位置。

有必要去掉"吗？我一直认为浏览器返回了 url 字符串的解析表示，它没有引号？另外，如果我错了，正则表达式不应该是 /["']/g 吗？

浏览器不必以任何特定格式返回 CSS 值，因此您必须接受任何可能的方式来说明规则。其中将包括带有 CSS 反斜杠转义的裸字符串。（此正则表达式不会处理这些字符串，并且它还会删除 URL 内任何位置的字符串 url(，因为开头没有 ^ 锚点。）如果你将其更改为允许 ' 引用，通过删除它们，您还会破坏任何带有撇号的 URL。这就是为什么您可能不应该尝试从 CSS 样式中提取 URL。

【参考方案2】：

这是因为 url() 字符串被包裹在它周围。您需要从字符串中删除它，例如使用替换功能...

var bgimg = jQuery("#imageBlock").css('background-image').replace('url(', '');
bgimg.replace(')', '');

【参考方案3】：

IMO，slice 比 substring 或 replace 更合适。试试这个：

jQuery("#imageID").attr(
    'src',
    jQuery("#imageBlock").css('background-image').slice(4,-1)
);

在这里，您在url( 和) 之间分割字符串。有关该方法的详细说明，请参阅 slice 上的 MDC。

【讨论】：

@Rakesh Juyal：是的。实际上，我自己在 IE 中编写了 95% 的代码。 slice 方法在 ECMAScript 第 3 版中定义，在 MSDN 上：msdn.microsoft.com/en-us/library/6w1bzf9f(VS.85).aspx。

【参考方案4】：

您需要剥离 url( 并关闭 ) 部分才能使其正常工作。

所以url(http://localhost:8080/images/1/myImage.png)

变成

http://localhost:8080/images/1/myImage.png

您可以使用子字符串、正则表达式替换或您选择的任何方法来执行此操作。

http://www.w3schools.com/jsref/jsref_replace.asp

也许：

jQuery("#imageID").attr('src',jQuery("#imageBlock").css('background-image').replace('url(','').replace(')','') )