Zestaw Javascript img src

Prawdopodobnie brakuje mi czegoś prostego, ale jest to dość denerwujące, gdy wszystko, co czytasz, nie działa. Mam obrazy, które mogą być wielokrotnie powielane w trakcie dynamicznie generowanej strony. Więc oczywistą rzeczą jest wstępne załadowanie go i używanie tej jednej zmiennej jako źródła przez cały czas.

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

następnie ustawiłem obraz za pomocą

  document["pic1"].src = searchPic;

lub

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

Jednak obraz nigdy nie jest poprawnie ustawiany w FireBug, kiedy odpytuję obraz, który otrzymuję [object HTMLImageElement]jako srcobraz

W IE otrzymuję:

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

Powinieneś ustawić src używając tego:

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

lub

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

Czysty JavaScript do tworzenia imgtagu i add attributesręcznie,

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

Ustaw src w pic1

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

lub z getElementById

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

j-Query, aby zarchiwizować to,

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

Instancje konstruktora obrazu nie są przeznaczone do nigdzie używane. Wystarczy ustawić src, a obraz zostanie wstępnie załadowany ... i to wszystko, koniec pokazu. Możesz odrzucić obiekt i przejść dalej.

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

to co powinieneś robić. Nadal możesz użyć konstruktora obrazu i wykonać drugą akcję w onloadmodule obsługi twojego searchPic. Gwarantuje to, że obraz zostanie załadowany przed ustawieniem srcrzeczywistego imgobiektu.

Tak jak to:

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
}

Jednym ze sposobów rozwiązania tego problemu jest również użycie document.createElementi utworzenie pliku HTML img i ustawienie jego atrybutów w ten sposób.

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

UWAGA : Jeden punkt jest to, że JavaScript społeczność zachęca teraz deweloperom wykorzystanie selektorów dokumentów takich jak querySelector, getElementByIda getElementsByClassNamezamiast dokumentu [ „Pic1”].

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

powinno działać

Nie musisz tworzyć zupełnie nowego obrazu ... atrybut src przyjmuje po prostu wartość ciągu :-)

Musisz ustawić

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

Sam searchPic jest twoim Image (), musisz przeczytać ustawione src.

Twoja właściwość src jest obiektem, ponieważ ustawiasz element src na cały obraz utworzony w JavaScript.

Próbować

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

Łał! podczas korzystania srcnastępnie srcod searchPicmuszą być stosowane również.

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

wygląda lepiej

Jeśli używasz WinJS , możesz zmienić srcza pomocą Utilitiesfunkcji.

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