Javascript mengatur img src

96

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]
javascript image src Alexis Wilke
sumber
Ini mungkin membantu stackoverflow.com/questions/4459379/…
Sandeep Amarnath

Jawaban:

96

Anda harus mengatur src menggunakan ini:

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

atau

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

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);
Jay Patel
sumber
6
document.getElementById ("pic1") tanpa #
Gianluca Demarinis
6

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
}
Breton
sumber
jika Anda menyetel src di onload () Anda mendapatkan loop tak terbatas yang mengganggu server, yaitu saat src dimuat, ia memanggil onload.
David Newcomb
ada hal lain yang tidak beres karena peristiwa pemuatan hanya dapat diaktifkan sekali. Anda tidak bisa mengaktifkannya lagi dengan menyetel sumber ke gambar yang sama.
Breton
1
Anda benar, ada artikel SO lain yang berbicara tentang masalah caching aneh ketika "XXXX / YYYY / search.png" adalah gambar webcam atau sesuatu yang berubah di sisi server. Mereka menyarankan agar kami mengubah tautan ke "XXXX / YYYY / search.png? T = <thedate>". Solusi Anda paling bagus dan terbersih, jadi saya menggabungkan keduanya dan itu menghancurkan server.
David Newcomb
@Dvidcom Astaga! itu yang rumit. Dalam hal ini, saya pikir saya akan membuang bagian Image () baru, dan sebagai gantinya memiliki dua gambar dom yang sebenarnya - seperti buffer ganda. sembunyikan gambar1, sembunyikan gambar2. dalam timer interval: setel src pada image1, dan di image1.onload, tampilkan 1, sembunyikan 2. Interval kebakaran: set src pada image2. di image2.onload, tampilkan 2, sembunyikan 1. tunggu, interval aktif: setel src pada image1. di image1.onload, tampilkan 1, sembunyikan 2- dll. dll ...
Breton
5

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"].

ambodi
sumber
2 
document["pic1"].src = searchPic.src

harus bekerja

Nir Retribusi
sumber
1

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

JorenB
sumber
1
Jika halaman dibuat secara dinamis menggunakan javascript, Anda pasti ingin gambar diunduh saat halaman dimuat sehingga Anda tidak mendapatkan penundaan yang mengganggu saat pertama kali Anda membuat elemen yang membutuhkannya. Itulah alasan untuk membuat objek Image.
tvanfosson
Anda benar, saya tidak terlalu tepat dalam menjawab saya. Saya hanya bermaksud mengatakan bahwa atribut src mengambil string, dan sama sekali lupa tentang keuntungan caching dari pembuatan Imageon sebelumnya. Terima kasih!
JorenB
0

Anda perlu mengatur

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

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

Mat Mannion
sumber
0

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;
Cᴏʀʏ
sumber
0

Wow! Bila Anda menggunakan srcmaka srcdari searchPicharus digunakan juga.

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

Terlihat lebih baik

Dewfy
sumber
0

Jika Anda menggunakan WinJS, Anda dapat mengubah srcmelalui Utilitiesfungsi.

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