当我尝试使用 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/