Javascript establecido img src

Probablemente me esté perdiendo algo simple, pero es bastante molesto cuando todo lo que lee no funciona. Tengo imágenes que pueden duplicarse muchas veces en el transcurso de una página generada dinámicamente. Entonces, lo obvio es precargarlo y usar esa variable como fuente todo el tiempo.

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

luego configuro la imagen usando

  document["pic1"].src = searchPic;

o

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

Sin embargo, la imagen nunca se configura correctamente en FireBug cuando consulto la imagen que obtengo [object HTMLImageElement]como srcde la imagen

En IE obtengo:

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

Deberías configurar el src usando esto:

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

o

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

JavaScript puro para crear imgetiquetas y 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);

Establecer src en pic1

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

o con getElementById

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

j-Query para archivar esto,

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

Las instancias del constructor de imágenes no deben usarse en ningún lugar. Simplemente configura las srcprecargas de imagen y, eso es todo, se acabó el programa. Puedes descartar el objeto y seguir adelante.

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

es lo que deberías estar haciendo. Todavía puede usar el constructor de imágenes y realizar la segunda acción en el onloadcontrolador de su searchPic. Esto asegura que la imagen se cargue antes de configurar el objeto srcreal img.

Al igual que:

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
}

Además, una forma de resolver esto es usar document.createElementy crear su img html y establecer sus atributos de esta manera.

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

OBSERVACIÓN : Un punto es que la comunidad Javascript en este momento alienta a los desarrolladores a usar selectores de documentos como querySelector, getElementByIdy en getElementsByClassNamelugar de document ["pic1"].

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

Deberia trabajar

No necesita construir una imagen completamente nueva ... el atributo src solo toma un valor de cadena :-)

Necesitas configurar

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

El searchPic en sí es su Image (), necesita leer el src que estableció.

Su propiedad src es un objeto porque está configurando el elemento src para que sea la imagen completa que creó en JavaScript.

Tratar

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

¡Guauu! cuando se utiliza srcentonces srcde searchPicdebe ser utilizado también.

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

Se ve mejor

Si está utilizando WinJS , puede cambiar a srctravés de las Utilitiesfunciones.

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