Javascript set img src

95

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]
Alexis Wilke
quelle
Dies könnte helfen, stackoverflow.com/questions/4459379/…
Sandeep Amarnath

Antworten:

95

Sie sollten den Quellcode folgendermaßen einstellen:

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

oder

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

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);
Jay Patel
quelle
6
document.getElementById ("pic1") ohne #
Gianluca Demarinis
6

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
}
Bretonisch
quelle
Wenn Sie src in onload () setzen, erhalten Sie eine Endlosschleife, die den Server hämmert, dh wenn src geladen wurde, ruft er onload auf.
David Newcomb
Es läuft noch etwas schief, da ein Ladeereignis nur einmal ausgelöst werden kann. Sie können es nicht wieder auslösen, indem Sie die Quelle auf dasselbe Bild einstellen.
Breton
1
Sie haben Recht, es gibt andere SO-Artikel, die über seltsame Caching-Probleme sprechen, wenn "XXXX / YYYY / search.png" ein Webcam-Bild ist oder etwas, das sich auf der Serverseite ändert. Sie schlugen vor, den Link in "XXXX / JJJJ / search.png? T = <Datum>" zu ändern. Ihre Lösung war am schönsten und saubersten, also habe ich beide kombiniert und sie hat den Server gehämmert.
David Newcomb
@ DavidNewcomb Yikes! Das ist eine schwierige Frage. In diesem Fall würde ich den neuen Image () - Teil fallen lassen und stattdessen zwei tatsächliche Dom-Images haben - wie einen Doppelpuffer. Bild1 ausblenden, Bild2 ausblenden. in einem Intervall-Timer: setze src auf image1 und in image1.onload zeige 1, verstecke 2. Intervallbrände: setze src auf image2. Zeigen Sie in image2.onload 2 an, verstecken Sie 1. Warten Sie, Intervall wird ausgelöst: Setzen Sie src auf image1. in image1.onload, zeige 1, verstecke 2- etc. etc ...
Breton
5

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“].

ambodi
quelle
2
document["pic1"].src = searchPic.src

sollte arbeiten

Nir Levy
quelle
1

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

JorenB
quelle
1
Wenn die Seite dynamisch mit Javascript generiert wird, möchten Sie, dass das Bild beim Laden der Seite heruntergeladen wird, damit Sie beim ersten Erstellen eines Elements, das es benötigt, keine störende Verzögerung erhalten. Aus diesem Grund wird das Image-Objekt erstellt.
Tvanfosson
Du hast recht, ich war in meiner Antwort nicht sehr präzise. Ich wollte nur sagen, dass das src-Attribut eine Zeichenfolge enthält, und habe den Caching-Vorteil der Erstellung des Imageon im Voraus völlig vergessen . Vielen Dank!
JorenB
0

Sie müssen einstellen

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

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

Mat Mannion
quelle
0

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;
Cᴏʀᴏʀ
quelle
0

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

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

sieht besser aus

Dewfy
quelle
0

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

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