web-dev-qa-db-ja.com

Javascriptセットimg src

私はおそらく簡単なものを見逃していますが、あなたが読んだすべてがうまくいかないとき、それは非常に迷惑です。動的に生成されたページの過程で何度も複製される画像があります。したがって、行うべき明らかなことは、それをプリロードし、その1つの変数を常にソースとして使用することです。

var searchPic;
function LoadImages() {
    searchPic = new Image(100,100);
    searchPic.src = "XXXX/YYYY/search.png";
    // This is correct and the path is correct
}

次に、画像を設定します

  document["pic1"].src = searchPic;

または

  $("#pic1").attr("src", searchPic);

ただし、FireBugで画像をクエリすると、画像のsrcとして[object HTMLImageElement]が取得されます

IEで以下を取得します。

http://localhost:8080/work/Sandbox/jpmetrix/[object]
javascriptimagesrc
78
John

これを使用してsrcを設定する必要があります。

document["pic1"].src = searchPic.src;

または

$("#pic1").attr("src", searchPic.src);
89
Richard

作成する純粋なJavaScript imgタグとadd attributes手動で、

var image = document.createElement("img");
var imageParent = document.getElementById("body");
image.id = "id";
image.className = "class";
image.src = searchPic.src;            // image.src = "IMAGE URL/PATH"
imageParent.appendChild(image);

Srcをpic1に設定します

document["#pic1"].src = searchPic.src;

またはgetElementByIdを使用

document.getElementById("pic1").src= searchPic.src;

これをアーカイブするj-Query、

$("#pic1").attr("src", searchPic.src);
48
Jay Patel

イメージコンストラクターのインスタンスは、どこでも使用するためのものではありません。 srcを設定するだけで、画像がプリロードされます...これで、ショーは終了です。オブジェクトを破棄して先に進むことができます。

document["pic1"].src = "XXXX/YYYY/search.png";

あなたがすべきことです。イメージコンストラクターを引き続き使用し、onloadのsearchPicハンドラーで2番目のアクションを実行できます。これにより、実際のsrcオブジェクトにimgを設定する前に画像がロードされます。

そのようです：

function LoadImages() {
    searchPic = new Image();
    searchPic.onload=function () {
        document["pic1"].src = "XXXX/YYYY/search.png";
    }
    searchPic.src = "XXXX/YYYY/search.png"; // This is correct and the path is correct
}
6
Breton

また、これを解決する1つの方法は、document.createElementを使用してhtml imgを作成し、その属性を次のように設定することです。

var image = document.createElement("img");
var imageParent = document.getElementById("Id of HTML element to append the img");
image.id = "Id";
image.className = "class";
image.src = searchPic.src;
imageParent.appendChild(image);

REMARK：1つのポイントは、Javascriptコミュニティが現在、開発者がdocument ["pic1ではなくquerySelector、getElementById、getElementsByClassNameなどのドキュメントセレクターの使用を推奨していることです。 "]。

4
ambodi
document["pic1"].src = searchPic.src

動作するはずです

2
Nir Levy

まったく新しいイメージを作成する必要はありません... src属性は単に文字列値を取ります:-)

1
JorenB

WinJS を使用している場合、src関数を使用してUtilitiesを変更できます。

WinJS.Utilities.id("pic1").setAttribute("src", searchPic.src);
0
Beanwah

設定する必要があります

document["pic1"].src = searchPic.src;

SearchPic自体がImage（）であるため、設定したsrcを読み取る必要があります。

0
Mat Mannion

Srcプロパティは、src要素をJavaScriptで作成した画像全体に設定するため、オブジェクトです。

試して

document["pic1"].src = searchPic.src;
0
Cᴏʀʏ

うわー！ srcを使用する場合は、srcのsearchPicも使用する必要があります。

document["pic1"].src = searchPic.src

良く見える

0
Dewfy