Conjunto de Javascript img src

Eu provavelmente estou sentindo falta de algo simples, mas é muito chato quando tudo que você lê não funciona. Eu tenho imagens que podem ser duplicadas várias vezes ao longo de uma página gerada dinamicamente. Então, 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 consultar a imagem que recebo [object HTMLImageElement] como o src da imagem

No IE eu recebo:

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

Você deve estar definindo o src usando isto:

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

ou

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

JavaScript puro para criar uma tag img e add attributes manualmente

 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

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

j-Query para arquivar isso,

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

Instâncias do construtor de imagem não são destinadas a serem usadas em qualquer lugar. Você simplesmente define o src , e a imagem é pré-carregada … e é isso, o show acabou. Você pode descartar o object 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 manipulador onload do seu searchPic . Isso garante que a imagem seja carregada antes de você definir o src no object img 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.createElement e criar seu html img e definir seus atributos como este.

 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 usar seletores de documentos como querySelector , getElementById e getElementsByClassName vez de documentar [“pic1”].

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

Deveria trabalhar

Você não precisa construir uma imagem totalmente nova … o atributo src só usa um valor de string 🙂

Você precisa definir

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

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

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

Experimentar

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

Uau! quando você usa src , o src de searchPic deve ser usado.

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

parece melhor

Se você estiver usando o WinJS, você pode alterar o src através das funções Utilities .

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