问将<img>元素指定为javascriptvariable的值
EN

Stack Overflow用户

提问于 2017-07-29 00:37:23

回答 2查看 844关注 0票数 1

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

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>

javascript

html

回答 2

Stack Overflow用户

回答已采纳

发布于 2017-07-29 01: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>

以上是基于回调的非常简单的示例。您可能希望使用对象或本机JS 对象异步加载映像，然后在完成映像时执行一些操作。

票数 1

Stack Overflow用户

发布于 2017-07-29 00: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>