Набір 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-Запит на архівування цього,

$("#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замість документа [ «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наскрізні Utilitiesфункції.

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