Javascript definido img src

Provavelmente estou perdendo algo simples, mas é muito chato quando tudo que você lê não funciona. Tenho imagens que podem ser duplicadas muitas vezes ao longo de uma página gerada dinamicamente. Portanto, a coisa óbvia a fazer é pré-carregá-lo e usar essa variável como fonte o tempo todo.

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

então eu defino a imagem usando

  document["pic1"].src = searchPic;

ou

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

No entanto, a imagem nunca é definida corretamente no FireBug quando eu consulto a imagem que obtenho [object HTMLImageElement]como o srcda imagem

No IE eu obtenho:

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

Você deve definir o src usando isto:

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

ou

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

JavaScript puro para criar imgtag e add attributesmanualmente,

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

Definir src em pic1

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

ou com getElementById

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

j-Query para arquivar isso,

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

As instâncias do construtor de imagem não devem ser usadas em qualquer lugar. Você simplesmente configura src, e os pré-carregamentos de imagem ... e pronto , o show acabou. Você pode descartar o objeto e seguir em frente.

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

é o que você deveria estar fazendo. Você ainda pode usar o construtor de imagem e executar a segunda ação no onloadmanipulador de seu searchPic. Isso garante que a imagem seja carregada antes de definir srcno imgobjeto real .

Igual 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
}

Além disso, uma maneira de resolver isso é usar document.createElemente criar seu img html e definir seus atributos desta forma.

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

OBSERVAÇÃO : um ponto é que a comunidade Javascript agora incentiva os desenvolvedores a usarem seletores de documentos como querySelector, getElementByIde em getElementsByClassNamevez de document ["pic1"].

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

Deveria trabalhar

Você não precisa construir uma imagem totalmente nova ... o atributo src apenas leva um valor de string :-)

Você precisa definir

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

O searchPic em si é sua Image (), você precisa ler o src que definiu.

Sua propriedade src é um objeto porque você está definindo o elemento src para ser a imagem inteira que você criou em JavaScript.

Experimentar

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

Uau! quando você usa srcentão srcde searchPicdeve ser usado também.

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

parece melhor

Se estiver usando o WinJS, você pode alterar srcas Utilitiesfunções.

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