43


5

jQueryを使用して画像srcを設定する方法

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。 これ以外の解決策がある場合は、お知らせください。さもなければ、「スライス」解決策をすぐに受け入れます。

4 Answer


35


IMO、「slice」は「substring」や「replace」よりも適切です。 これを試して:

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

ここでは、 `url(`と `)`の間にある文字列をスライスしています。 メソッドの詳細な説明については、https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Objects/String/Slice [slice]のMDCを参照してください。


7


URL部分を抽出する必要があります。

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


2


これは、url()文字列がその周りをラップしているためです。 たとえば、replace関数を使用して、文字列から削除する必要があります…​

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


0


それが機能するためには、 `url(`と閉じる `)`部分を取り除く必要があります。

したがって、 url(http:// localhost:8080 / images / 1 / myImage.png)

になる

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

これは、部分文字列、正規表現の置換、または任意の方法で行うことができます。

おそらく:

`jQuery("#imageID ")。attr( 'src'、jQuery("#imageBlock ")。css( 'background-image')。replace( 'url('、 '')。replace( ')'、 ' ')) `