[javascript] 자바 스크립트 세트 img src

Program / 글쓴이

나는 아마도 간단한 것을 놓치고 있지만 당신이 읽은 모든 것이 작동하지 않을 때 꽤 짜증납니다. 동적으로 생성 된 페이지 과정에서 여러 번 복제 될 수있는 이미지가 있습니다. 그래서 분명한 것은 그것을 미리로드하고 항상 그 하나의 변수를 소스로 사용하는 것입니다.

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

내가 얻을 이미지를 조회 할 때, 이미지가 방화범 제대로 설정되지 않습니다 [object HTMLImageElement]는 AS src이미지

IE에서는 다음을 얻습니다.

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

답변

다음을 사용하여 src를 설정해야합니다.

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

또는

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

답변

순수 자바 스크립트를 사용하여 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.createElementhtml 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);

비 고 : 하나의 포인트는 자바 스크립트 커뮤니티는 지금과 같은 사용 문서 선택기에 개발자를 장려한다는 것입니다 querySelector, getElementById그리고 getElementsByClassName오히려 문서보다 더 [ “PIC1”].

답변

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

작동해야

답변

완전히 새로운 이미지를 생성 할 필요는 없습니다. src 속성은 문자열 값만받습니다. 🙂

답변

설정해야합니다.

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

searchPic 자체는 Image ()이므로 설정 한 src를 읽어야합니다.