Question

我正在使用Javascript创建一个待办事项列表应用程序，我想使用.png图像来显示删除和完整图标。我为图像创建了两个变量，并使用<img src="images/complete.png" height="30">作为变量的值。但是，当我加载浏览器时，图像不显示。

Snapshot of app

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>

Answer 1

然而，当我加载浏览器时，图像不显示。

这是因为你试图以错误的方式去做。这里的想法是创建html元素，然后像@Lucky Soni所示给它分配src属性。但是，我想改进他的解决方案。请注意，图像可能很大，或者可能会出现一些网络问题。它可能会显着延迟图像加载，如果您不能正确处理这种情况，您的用户可能会看到浏览器＆＃39;默认的破碎图像图标或图像本身慢慢加载到页面中。要处理这种情况，您可以onload使用<img>事件，如下所示：

＆＃13;

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);
}

＆＃13;

.img {
    width: 50%;
    border: 1px solid orange;
    display: block;
}

＆＃13;

<div id="test">My image:</div>

＆＃13;

以上是基于回调的非常简单的示例。您可能希望使用Jquery's Deferred object或本机JS Promise object异步加载图像，然后在完成图像时执行某些操作。

Answer 2

<强>更新

在页面加载时预加载图像

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>

将<img/>元素指定为javascript变量的值

2 个答案: