如何使用jQuery设置图片的src属性

Question

我想使用jQuery更改图像src属性。

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

使用上述代码我可以更改src属性，但是当我尝试以下操作时：

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

我无法更改src。

提供的：

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

返回值:

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

编辑 #1 就在我准备接受这个解决方案的时候。我必须说，几乎所有的解决方案都在FF中工作。我尝试了：

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

我猜其他的也会起作用。但是没有一个解决方案适用于IE。 原因是: 当FF返回:

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

IE返回:

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

^^请注意这里的引号

那么，设置src属性的通用方式是什么？我需要测试浏览器是否为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 方案。

- Rakesh Juyal

---

这很简单明了。 - Altaf Patel

Answer 1

我认为，slice比substring或replace更合适。试试这个：

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

这里，你正在将字符串切片在url(和)之间。请参阅MDC关于slice的详细描述。

- Andy E

---

@Rakesh Juyal：是的。我自己实际上有95%的时间在IE中编码。slice方法在ECMAScript第3版中定义，并且可以在MSDN上找到：http://msdn.microsoft.com/en-us/library/6w1bzf9f(VS.85).aspx。 - Andy E

Answer 2

您需要提取url部分：

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

- Darin Dimitrov

---

顺便问一下，这个 replace(/url\(|\)$/ig, ""); 是什么意思？ - Rakesh Juyal

它将字符串中的url()部分替换为""，以便您单独获取图像的位置。 - Jamie Dixon

去除 " 是必须的吗？我一直认为浏览器返回的是解析后的URL字符串表示形式，而没有引号？另外，如果我错了，正则表达式不应该是 /["']/g 吗？ - Andy E

浏览器不必以任何特定格式返回CSS值，因此您必须接受陈述规则的任何可能方式，其中包括带有CSS反斜杠转义的裸字符串。（这个正则表达式无法处理它们，并且它还会删除URL内部的字符串“url（”，因为在开头没有“^”锚点。）如果您通过删除它们来允许“'”引号，您也会破坏任何具有撇号的URL。所有这些都是为什么您可能不应该尝试从CSS样式中提取URL的原因。 - bobince

Answer 3

这是因为它被包裹在url()字符串中。你需要从字符串中去掉它，例如使用replace函数...

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

- davydepauw

Answer 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(')','') )

- Alex Sexton