2014-04-07 15 views
-3

이 문제에 대한 해결책을 찾고 있었지만 심하게 고생했습니다. HTML 파일 안에 div를 선언하여 이미지를 저장 한 다음 Javascript에서 이미지 경로를 동적으로 추가합니다. 그러나 어떤 이미지도 보여주지 않습니다. div와 이미지 경로를 모두 선언하면 이미지가 표시되지만이 경로를 선택하는 것이 좋습니다.HTML 이미지가 표시되지 않습니다.

HTML은 다음과 같습니다

<div id="left" class="photos"></div> 

와 같은 자바 스크립트 :

document.getElementById('left').src = "images/1001.jpg"; 

는 여기에서 문제가 될 수 있습니까? 내가 아는 기본 메커니즘이있을 수 있습니까?

+0

당신이 사업부에 src 속성을 추가 할 수 있을지는 모르겠지만, 당신은 img 태그를 시도 않았다 즉시? – Kimmax

+0

도움이 될 [이 답변] (http://stackoverflow.com/questions/19331606/onclick-add-image-to-div)을 참조하십시오. – user3241019

답변

5

HTML 이미지가 표시 되려면 <img /> 태그가 필요합니다.

<img id="left" class="photos" /> 
+0

아닙니다. @Dmitriy가 말했듯이'background-image' CSS 속성을 사용할 수 있습니다. – adripanico

+0

특정 div에 배경 이미지를 줄 수도 있습니다. – Chester

3

<img> 태그에는 'src' 속성이 있습니다. <div> 태그 -하지 마십시오. 어느 스위치 <img>에 :

<img src='my/image.png' /> 

또는 사용 CSS background 특성 :

언급 한 바와 같이
div { 
    background-image:url('my/image.png'); 
    /* Div element won't adjust its size to contain an image, so width and 
     height properties might be necessary, depending on your intentions. */ 
    width: 100px; 
    height: 100px; 
} 
+0

감사합니다! 바로이 사실을 깨달았습니다. – user2781042

+0

div 컨테이너의 widht와 height도 설정하는 것이 중요합니다. – adripanico

+0

@adripanico, 당신은 절대적으로 맞습니다. 이 div가 자체 크기 계산을 가지고 있지 않으면 어떤 종류의 배경 텍스처를 아래에 떨어 뜨리려는 의도가 아닙니다. – Dmitriy

0

, 당신은 divsrc 속성을 설정하려고하고 있습니다. 그러나 당신은 또한 당신이 동적으로 그 이미지에 div을 추가하고 싶다고 말했습니까? 당신은 그냥 자바 스크립트를 사용하려면

function setImage(url) { 
    var div = document.getElementById('left'); 
    var imgs = document.getElementsByTagName('img'); 

// if there are no images 
    if(imgs.length===0) { 
    // create one 
     var img = document.createElement('img'); 
    // set the src 
     img.setAttribute('src',url); 
    // put it in the div 
     div.appendChild(div); 
    } 
// otherwise 
    else { 
    // set the src of the first image 
     imgs[0].src = url; 
    } 
} 
0

, 해당 기능을 사용할 수 있습니다 :

function showP(el,pic) { 
    document.getElementById(el).style.background = 'url(' + pic + ')'; 
} 
+0

조언 해 주셔서 감사합니다. 선상에서 당신의 제안을 받아 들일 것입니다. – user2781042

관련 문제