如何使用 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') );

我无法更改源代码。

提供

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 解决方案。

Answer 1

需要提取url部分：

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

Answer 2

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

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

Answer 3

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

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

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

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