Набор javascript img src

Мне, наверное, не хватает чего-то простого, но меня очень раздражает, когда все, что вы читаете, не работает. У меня есть изображения, которые могут многократно дублироваться в течение динамически сгенерированной страницы. Таким образом, очевидная вещь, которую нужно сделать, - это предварительно загрузить его и все время использовать эту переменную в качестве источника.

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

затем я установил изображение, используя

  document["pic1"].src = searchPic;

или

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

Однако изображение никогда не устанавливается должным образом в FireBug, когда я запрашиваю изображение, которое я получаю [object HTMLImageElement]как srcизображение.

В IE я получаю:

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

Вы должны установить src, используя это:

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

или

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

Чистый JavaScript для создания imgтега и add attributesвручную,

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

Установить src в pic1

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

или с getElementById

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

j-Query для архивации этого,

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

Экземпляры конструктора изображения не предназначены для использования где-либо. Вы просто устанавливаете src, и изображение загружается ... и все, шоу окончено. Вы можете выбросить объект и двигаться дальше.

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

это то, что вам следует делать. Вы по-прежнему можете использовать конструктор изображения и выполнить второе действие в onloadобработчике вашего searchPic. Это гарантирует, что изображение будет загружено до того, как вы установите srcна реальный imgобъект.

Вот так:

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
}

Кроме того, один из способов решить эту проблему - использовать document.createElementи создать свой html img и установить его атрибуты, как это.

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

ЗАМЕЧАНИЕ : Во- первых, сообщество Javascript прямо сейчас поощряет разработчиков использовать селекторы документов, такие как querySelector, getElementByIdи, getElementsByClassNameа не document ["pic1"].

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

должно сработать

Вам не нужно создавать полностью новое изображение ... атрибут src просто принимает строковое значение :-)

Вам нужно установить

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

Сам searchPic - это ваш Image (), вам нужно прочитать установленный вами src.

Ваше свойство src является объектом, потому что вы устанавливаете элемент src как все изображение, созданное вами в JavaScript.

Пытаться

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

Вот это да! когда вы используете , srcто srcиз searchPicследует использовать также.

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

выглядит лучше

Если вы используете WinJS, вы можете изменить файлsrc через Utilitiesfunctions.

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