Javascript imposta img src

Probabilmente mi manca qualcosa di semplice ma è piuttosto fastidioso quando tutto ciò che leggi non funziona. Ho immagini che possono essere duplicate più volte nel corso di una pagina generata dynamicmente. Quindi la cosa ovvia da fare è precaricarlo e usare quella variabile come sorgente tutto il tempo.

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

poi ho impostato l’immagine usando

  document["pic1"].src = searchPic; 

o

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

Tuttavia, l’immagine non viene mai impostata correttamente in FireBug quando interrogo l’immagine ottengo [object HTMLImageElement] come src dell’immagine

In IE ottengo:

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

Dovresti impostare l’src usando questo:

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

o

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

JavaScript puro per creare tag img e add attributes manualmente,

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

Imposta src in pic1

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

o

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

j-Query per archiviare questo,

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

Le istanze del costruttore di immagini non sono pensate per essere utilizzate ovunque. È sufficiente impostare src e il precaricamento dell’immagine … e il gioco è fatto, lo show è finito. Puoi scartare l’object e andare avanti.

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

è quello che dovresti fare. Puoi comunque utilizzare il costruttore di immagini ed eseguire la seconda azione nel gestore onload del tuo searchPic . Questo assicura che l’immagine sia caricata prima di impostare src sull’object reale img .

Così:

 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 } 

Inoltre, un modo per risolverlo è usare document.createElement e creare il tuo img html e impostarne gli attributi in questo modo.

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

NOTA : un punto è che la comunità Javascript in questo momento incoraggia gli sviluppatori a utilizzare selettori di documenti come querySelector , getElementById e getElementsByClassName piuttosto che document [“pic1”].

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

dovrebbe funzionare

Non hai bisogno di build una nuova immagine … l’attributo src prende solo un valore stringa 🙂

È necessario impostare

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

La searchPic stessa è la tua Image (), devi leggere l’src che hai impostato.

La tua proprietà src è un object perché stai impostando l’elemento src come l’intera immagine che hai creato in JavaScript.

Provare

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

Wow! quando usi src devi usare anche src di searchPic .

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

sembra migliore

Se stai usando WinJS puoi cambiare il src attraverso le funzioni Utilities .

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