Javascript impostato img src

Probabilmente mi manca qualcosa di semplice, ma è piuttosto fastidioso quando tutto ciò che leggi non funziona. Ho immagini che possono essere duplicate molte volte nel corso di una pagina generata dinamicamente. Quindi la cosa ovvia da fare è precaricarlo e utilizzare 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 che ottengo [object HTMLImageElement]come srcimmagine

In IE ottengo:

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

Dovresti impostare src usando questo:

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

o

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

JavaScript puro per creare imgtag e add attributesmanualmente,

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 con getElementById

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

j-Query per archiviarlo,

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

Le istanze del costruttore di immagini non sono pensate per essere utilizzate ovunque. Devi semplicemente impostare il src, e l'immagine viene precaricata ... e il gioco è fatto, lo spettacolo è finito. Puoi scartare l'oggetto e andare avanti.

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

è quello che dovresti fare. Puoi comunque usare il costruttore dell'immagine ed eseguire la seconda azione nel onloadgestore del tuo file searchPic. Ciò garantisce che l'immagine venga caricata prima di impostare l' oggetto srcreale 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 risolvere questo problema è usare document.createElemente creare il tuo img html e impostare i suoi 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, getElementByIde getElementsByClassNamepiuttosto che document ["pic1"].

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

dovrebbe funzionare

Non è necessario costruire un'immagine completamente nuova ... l'attributo src prende solo un valore stringa :-)

Devi impostare

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

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

La tua proprietà src è un oggetto perché stai impostando l'elemento src in modo che sia l'intera immagine che hai creato in JavaScript.

Provare

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

Wow! quando si utilizza srcallora srcdi searchPicdeve essere utilizzato anche.

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

sembra migliore

Se stai usando WinJS puoi cambiare il srctramite le Utilitiesfunzioni.

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