Javascript mengatur img src

Saya mungkin melewatkan sesuatu yang sederhana tetapi cukup mengganggu ketika semua yang Anda baca tidak berfungsi. Saya memiliki gambar yang dapat digandakan berkali-kali selama halaman yang dibuat secara dinamis. Jadi hal yang jelas harus dilakukan adalah memuatnya terlebih dahulu dan menggunakan satu variabel itu sebagai sumber sepanjang waktu.

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

lalu saya atur gambarnya menggunakan

  document["pic1"].src = searchPic;

atau

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

Namun, gambar tidak pernah disetel dengan benar di FireBug saat saya menanyakan gambar yang saya dapatkan [object HTMLImageElement]sebagai srcgambar

Di IE saya mendapatkan:

http://localhost:8080/work/Sandbox/jpmetrix/[object]

Anda harus mengatur src menggunakan ini:

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

atau

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

JavaScript Murni untuk Membuat imgtag dan add attributessecara manual,

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);

Tetapkan src di pic1

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

atau dengan getElementById

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

j-Query untuk mengarsipkan ini,

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

Contoh konstruktor gambar tidak dimaksudkan untuk digunakan di mana pun. Anda cukup mengatur src, dan gambar dimuat sebelumnya ... dan hanya itu, pertunjukan selesai. Anda dapat membuang benda tersebut dan melanjutkan.

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

adalah apa yang seharusnya kamu lakukan. Anda masih dapat menggunakan konstruktor gambar, dan melakukan tindakan kedua di onloadpenangan file searchPic. Ini memastikan gambar dimuat sebelum Anda mengaturnya srcpada imgobjek nyata .

Seperti:

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
}

Juga, salah satu cara untuk mengatasinya adalah dengan menggunakan document.createElementdan membuat img html Anda dan mengatur atributnya seperti ini.

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);

KETERANGAN : Satu poin adalah komunitas Javascript saat ini mendorong pengembang untuk menggunakan pemilih dokumen seperti querySelector, getElementByIddan getElementsByClassNamedaripada dokumen ["pic1"].

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

harus bekerja

Anda tidak perlu membuat gambar yang benar-benar baru ... atribut src hanya menggunakan nilai string :-)

Anda perlu mengatur

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

SearchPic itu sendiri adalah Image Anda (), Anda perlu membaca src yang Anda setel.

Properti src Anda adalah sebuah objek karena Anda menyetel elemen src menjadi keseluruhan gambar yang Anda buat di JavaScript.

Mencoba

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

Wow! Bila Anda menggunakan srcmaka srcdari searchPicharus digunakan juga.

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

Terlihat lebih baik

Jika Anda menggunakan WinJS, Anda dapat mengubah srcmelalui Utilitiesfungsi.

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