将<img>元素指定为javascriptvariable的值
将<img>元素指定为javascriptvariable的值
提问于 2017-07-29 08:37:23
我正在创建一个使用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>
回答 2
Stack Overflow用户
回答已采纳
发布于 2017-07-29 09:46:44
但是，当我在浏览器上加载时，图像不会显示。
这是因为你试图用错误的方式做这件事。这里的想法是创建html元素，然后像@Lucky所显示的那样将src属性分配给它。不过，我想改进他的解决办法。请注意，图像可能很大，或者可能出现一些网络问题。它可能会显著延迟图像加载，如果不能正确处理这种情况，用户可能会看到浏览器的默认损坏图像图标或图像本身缓慢加载到页面中。要处理这种情况，可以将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>
Stack Overflow用户
发布于 2017-07-29 08:47:42
更新：
页面加载上的预加载图像
function preloadImage(url) {
(new Image()).src = url;
}
var image1Url = 'http://via.placeholder.com/50?text=Done',
image2Url = 'http://via.placeholder.com/50?text=Remove';
function createImageElement(url){
var image1 = document.createElement('img');
image1.src = url;
return image1;
}
// preload the images
preloadImage(image1Url);
preloadImage(image2Url);
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.appendChild(createImageElement(image1Url));
var complete = document.createElement("button");
complete.classList.add("complete");
complete.appendChild(createImageElement(image2Url));
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45387210
复制相关文章
相似问题
腾讯云开发者
