Question

我一直在寻找解决这个问题的办法，但我很困难。我在html文件中声明一个div来保存图像，然后在Javascript中动态添加图像路径。但没有图像显示。当我宣布div和图像路径时，然后图像显示，我宁愿不去这条路线。

html看起来像这样：

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

和这样的Javascript：

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

这可能是什么问题？可能有一些我不知道的潜在机制？

Answer 1

HTML需要<img />标记才能显示图片。

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

Answer 2

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

Answer 3

如上所述，您尝试在src上设置div属性。但是你还说你想动态地将图像添加到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;
    }
}

Answer 4

如果您只想使用javascript，可以使用该功能：

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

HTML图片没有显示

4 个答案: