Jeu Javascript img src

Il me manque probablement 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. Donc, la chose évidente à faire est de le précharger et d'utiliser cette variable comme source tout le temps.

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

puis je règle 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 que j'obtiens en [object HTMLImageElement]tant que srcde l'image

Dans IE, j'obtiens:

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

Vous devriez définir le src en utilisant ceci:

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

ou

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

JavaScript pur pour créer une imgbalise et add attributesmanuellement,

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

Les instances du constructeur d'image ne sont pas destinées à être utilisées n'importe où. Vous définissez simplement le 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"; 

est ce que vous devriez faire. Vous pouvez toujours utiliser le constructeur d'image et effectuer la deuxième action dans le onloadgestionnaire de votre searchPic. Cela garantit que l'image est chargée avant de définir srcsur l' imgobjet réel .

Ainsi:

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
}

De plus, une façon de résoudre ce problème est d'utiliser document.createElementet de créer votre img html et de définir ses attributs comme ceci.

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

REMARQUE : Un point est que la communauté Javascript encourage actuellement les développeurs à utiliser des sélecteurs de documents tels que querySelector, getElementByIdet getElementsByClassNameplutôt que document ["pic1"].

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

devrait marcher

Vous n'avez pas besoin de construire une toute nouvelle image ... l'attribut src prend juste une valeur de chaîne :-)

Vous devez définir

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

Le searchPic lui-même est votre Image (), vous devez lire le src que vous avez défini.

Votre propriété src est un objet, car vous définissez l'élément src comme l'image entière que vous avez créée en JavaScript.

Essayer

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

Hou la la! lorsque vous utilisez srcalors srcde searchPicdoit être utilisé également.

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

regarde mieux

Si vous utilisez WinJS, vous pouvez modifier srcles Utilitiesfonctions via .

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