Javascript set img src

Mir fehlt wahrscheinlich etwas Einfaches, aber es ist ziemlich ärgerlich, wenn alles, was Sie lesen, nicht funktioniert. Ich habe Bilder, die im Verlauf einer dynamisch generierten Seite viele Male dupliziert werden können. Das Offensichtliche ist also, es vorzuladen und diese eine Variable die ganze Zeit als Quelle zu verwenden.

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

dann setze ich das bild mit

  document["pic1"].src = searchPic;

oder

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

Das Bild wird jedoch in FireBug nie richtig eingestellt, wenn ich das Bild abfrage, das ich [object HTMLImageElement]als das srcdes Bildes erhalte

Im IE bekomme ich:

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

Sie sollten den Quellcode folgendermaßen einstellen:

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

oder

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

Reines JavaScript zum Erstellen von imgTags und add attributesmanuell,

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

Setze src in pic1

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

oder mit getElementById

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

j-Abfrage, um dies zu archivieren,

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

Instanzen des Bildkonstruktors dürfen nirgendwo verwendet werden. Sie stellen einfach die srcund die Bildvorladungen ein ... und das war's, die Show ist vorbei. Sie können das Objekt verwerfen und weitermachen.

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

ist das, was du tun solltest. Sie können weiterhin den Bildkonstruktor verwenden und die zweite Aktion im onloadHandler Ihres ausführen searchPic. Dadurch wird sichergestellt, dass das Bild geladen wird, bevor Sie das srcfür das reale imgObjekt festlegen .

Wie so:

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
}

Eine Möglichkeit, dies zu lösen, besteht darin document.createElement, Ihr HTML- IMG zu verwenden und zu erstellen und seine Attribute wie folgt festzulegen .

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

ANMERKUNG : Ein Punkt ist , dass gerade jetzt Javascript Community - Entwickler zu verwenden Dokument Selektoren wie ermutigt querySelector, getElementByIdund getElementsByClassNameanstatt Dokument [ „pic1“].

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

sollte arbeiten

Sie müssen kein ganz neues Bild erstellen ... das src-Attribut nimmt nur einen Zeichenfolgenwert an :-)

Sie müssen einstellen

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

Das searchPic selbst ist Ihr Image (). Sie müssen den von Ihnen festgelegten src lesen.

Ihre src-Eigenschaft ist ein Objekt, da Sie das src-Element als das gesamte Bild festlegen, das Sie in JavaScript erstellt haben.

Versuchen

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

Beeindruckend! Wenn Sie srcdann srcvon verwenden, searchPicmuss auch verwendet werden.

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

sieht besser aus

Wenn Sie WinJS verwenden , können Sie srcdie UtilitiesFunktionen ändern .

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