Javascript set 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]

Ответы

Ответ 1

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

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

или

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

Ответ 2

Чистый 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;

или

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

j-Query, чтобы архивировать это,

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

Ответ 3

Экземпляры конструктора изображений не предназначены для использования в любом месте. Вы просто устанавливаете 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
}

Ответ 4

Кроме того, одним из способов решения этой проблемы является использование 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" ].

Ответ 5

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

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

Ответ 6

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

Ответ 7

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

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

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

Ответ 8

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

Попробуйте

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

Ответ 9

Ничего себе! когда вы используете src, тогда необходимо также использовать src of searchPic.

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

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

Ответ 10

Если вы используете WinJS, вы можете изменить функции src на Utilities.

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