Javascript set img src

Question

J'ai probablement raté quelque chose de simple, mais c'est assez ennuyeux quand tout ce que vous lisez ne fonctionne pas. J'ai des images qui peuvent être dupliquées plusieurs fois au cours d'une page générée dynamiquement. La chose la plus évidente à faire est donc de les précharger et d'utiliser cette seule variable comme source en permanence.

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

puis j'ai défini l'image en utilisant

  document["pic1"].src = searchPic;

ou

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

Cependant, l'image n'est jamais définie correctement dans FireBug ; lorsque j'interroge l'image, j'obtiens les résultats suivants [object HTMLImageElement] como el src de l'image

Dans IE, j'obtiens :

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

Answer 1

Vous devriez définir le src en utilisant ceci :

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

ou

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

Answer 2

Pure JavaScript pour créer img et add attributes manuellement ,

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

---

Définir src dans pic1

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

ou avec getElementById

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

j-Query pour archiver ceci,

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

Answer 3

Les instances du constructeur d'images ne sont pas destinées à être utilisées ailleurs. Vous définissez simplement l'élément src et l'image se précharge... et c'est tout, le spectacle est terminé. Vous pouvez jeter l'objet et passer à autre chose.

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

c'est ce que vous devriez faire. Vous pouvez toujours utiliser le constructeur d'image, et effectuer la deuxième action dans la fenêtre de l'image. onload du gestionnaire de votre searchPic . Cela permet de s'assurer que l'image est chargée avant de régler le src sur le réel img objet.

Comme ça :

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
}

Answer 4

De plus, une façon de résoudre ce problème est d'utiliser document.createElement et créez votre html img et définissez ses attributs comme suit.

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 : Un point est que la communauté Javascript encourage actuellement les développeurs à utiliser des sélecteurs de documents tels que querySelector , getElementById y getElementsByClassName plutôt que document["pic1"].

Answer 5

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

devrait fonctionner