我正在使用 Javascript 创建一个待办事项列表应用程序，我想使用 .png 图像来显示删除和完成图标。我为图像创建了两个变量并使用了 <img src="images/complete.png" height="30">作为变量的值。但是，当我在浏览器上加载时，图像不显示。
var image1 = '<img src="images/deleteicon.png" height="30" >';
var image2 = '<img src="images/complete.png" height="30" >';
document.getElementById('add').addEventListener('click', function(){
var value = document.getElementById('item').value;
if(value){
addItemToDo(value);
}
})
function addItemToDo(text){
var list = document.getElementById('todo');
var item = document.createElement("li");
item.innerText = text;
var buttons = document.createElement("div");
buttons.classList.add("buttons");
var remove = document.createElement("button");
remove.classList.add("remove");
remove.innerHtml = image1;
var complete = document.createElement("button");
complete.classList.add("complete");
complete.innerHtml = image2;
buttons.appendChild(remove);
buttons.appendChild(complete);
item.appendChild(buttons);
list.insertBefore(item, list.childNodes[0]);
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To Do List</title>
<link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet">
<link type="text/css" href="Css/style.css" rel="stylesheet">
</head>
<body>
<header>
<input placeholder="Enter a task" id="item">
<button type="button" ><img src="images/add.png" alt="Add" height="30" id="add"></button>
</header>
<div class="container">
<ul class="todo" id="todo">
<li>
This is an Item
<div class="buttons">
<button class="remove" ><img src="images/deleteicon.png" alt="Add" height="30" id=""></button>
<button class="complete"><img src="images/complete.png" alt="Add" height="30" id=""></button>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="Js/main.js">
</script>
</body>
</html>最佳答案
However when I load on the browser the images do not show.
这是因为你试图以错误的方式去做。这里的想法是创建 html 元素然后分配 src正如@Lucky Soni 所展示的那样。但是，我想改进他的解决方案。请注意，图像可能会很大，或者可能会出现一些网络问题。它可能会显着延迟图像加载，如果您没有正确处理这种情况，您的用户可能会看到浏览器默认损坏的图像图标或图像本身缓慢加载到页面中。要处理这种情况，您可以使用 onload <img> 的事件像这样:
function loadImage(elem, imgPath, callback) {
var newImg = new Image();
newImg.onload = function() {
// insert it into the page. this is equal to newImg - our image element
elem.appendChild(this);
// you can do something else passing down image or element to a callback function
callback(this);
}
newImg.src = imgPath;
newImg.classList.add("img");
}
var elem = document.getElementById('test');
var imgPath = 'http://rcysl.com/wp-content/uploads/2017/02/Pics-Of-Nature-HD-.jpg';
loadImage(elem, imgPath, otherfunction);
function otherfunction(param) {
console.log('Some action with ' + param);
}.img {
width: 50%;
border: 1px solid orange;
display: block;
}<div id="test">My image:</div>以上是基于回调的非常简单的示例。您可能想使用 Jquery's Deferred object或原生 JS Promise object异步加载图像，然后在图像完成后执行一些操作。
关于javascript - 将 <img> 元素分配为 javascript 变量的值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45387210/