javascript - 我正在尝试使用 javascript 将图像添加到 HTML 但没有内容?

标签 javascript html

当我尝试使用 javascript 添加图像时,它会显示图像的边框,但里面没有内容。它只是一个空的空白框。有什么想法吗?

Javascript:

var img=document.createElement("img");
img.src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
var src = document.getElementById("gameboard");
src.appendChild(img);

HTML:

<body>
  <div>
    <img id="gameboard">
  </div>
</body>

J fiddle : https://jsfiddle.net/bj5d6t7k/1/

最佳答案

您正试图将图像附加到另一个不允许的图像中。只需设置现有图像的 src 属性即可:

var img=document.getElementById("gameboard");
img.src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
<body>
  <div>
    <img id="gameboard">
  </div>
</body>

或者:如果你想创建元素并附加 Node.appendChild()

The Node.appendChild() method adds a node to the end of the list of children of a specified parent node.

var img=document.createElement("img");
img.src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500";
var gamecontiner = document.getElementById("gamecontiner");
gamecontiner.appendChild(img);
<body>
  <div id="gamecontiner">
  </div>
</body>

关于javascript - 我正在尝试使用 javascript 将图像添加到 HTML 但没有内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59675920/

相关文章:

javascript - 单击链接不应触发 parent 的 onclick 事件

javascript - 光滑的 slider 用数字替换点

css - 为什么不溢出 :auto required for text content?

html - 表格宽度不适用于多行

html - 如何创建不添加边距的边框?

html - 避免div过大导致页面溢出

javascript - 将参数传递给 a4j :function

javascript - 如何在关闭时清除 Bootstrap 远程模式内容?

javascript - 如何在 javascript 函数中使用 PHP 生成的 JSON 数组?

html - 在此示例中,当按钮悬停时如何使所有工具提示可见?