时间戳

首页 > 解决方案 > 图像不显示在 innerHTML 中

javascript - 图像不显示在 innerHTML 中

问题描述

我想使用 innerHTML 显示图像，但我似乎无法让它工作。它适用于文本，我试图让它与 innerHTML 中的其他项目一起动态显示。更新：图像在 innerHTML 中的另一个元素内。图片示例：

    var div = document.createElement('div');
    var image = document.createElement('img');
    image.setAttribute('src', "https://picsum.photos/200/300");/*sample pic*/
    div.innerHTML = '<a href="/"><h3>title</h3>'+ image + '</a>';
    document.getElementById('block').appendChild(div);/*work fine if appendChild(image) or text inside innerHTML*/
<div id="block">
  image
</div>

标签： javascripthtml

解决方案

innerHtml 用于将字符串解析为 HTML 代码。

要将图像附加到 DOM 元素，请使用：

div.appendChild(image);

推荐阅读