Question

我看到这个问题被问了很多遍，我一直在寻找一个解决方案，但找不到针对我特定问题的解决方案。我正在使用不同的字符串和变量组成一个链接，我想用图像填充表格。到目前为止，在解决此问题的大多数线程中，我可以看到以下策略：

document.getElementById('ID').src = variablewithlink;

甚至是这个：

document.querySelector('img').src = variablewithlink;

在html中插入为：

<img id="ID" src="" width="100" height="70";/>

这就是我在代码中使用的内容，但仍然可以显示

Uncaught TypeError: Cannot set property 'src' of null

当我使用alert记录变量时，它显示了包含图像的链接，但是在<img>标记中读取该变量时，会出现该错误。谁能帮助我找出我做错了什么？代码如下：

<html>

<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>
  <script>
    var config = {
      apiKey: "AIzaSyCg9wsEL5tAYdSyz9IapqvvMGWpFNAlc74",
      authDomain: "checkup-7b62e.firebaseapp.com",
      databaseURL: "https://checkup-7b62e.firebaseio.com",
      projectId: "checkup-7b62e",
      storageBucket: "checkup-7b62e.appspot.com",
      messagingSenderId: "324802643995"
    };
    firebase.initializeApp(config);
  </script>

  <head>
  </head>
  <table style="width:100%" id="ex-table">
    <tr id="tr">
      <th>Image</th>
      <th>Text</th>
  </table>

  <script>
    var database = firebase.database();
    database.ref("-Events").orderByKey().limitToLast(5).once('value', function(snapshot) {
      if (snapshot.exists()) {
        content = '';
        snapshot.forEach(function(data) {
          val = data.val();
          link_for_picture = "https://firebasestorage.googleapis.com/v0/b/checkup-7b62e.appspot.com/o/" + val.imageUrl.split("/")[3] + "?alt=media";
          document.getElementById('image').src = link_for_picture;
          alert(link_for_picture);
          content += '<tr>';
          content += '<td>' + '<img id="image" src=link_for_picture border={0} height={150} width={150}></img>' + '</td>';
          content += '<td>' + val.headline + '</td>';
          content += '</tr>';
        });
        $('#ex-table').append(content);
      }
    });
  </script>

</body>

</html>

Answer 1

您忘记连接变量<img id="image" src='+link_for_picture+' border={0}。使用template literals可以防止此类错误。
您遇到了 src为null 的错误，因为您要尝试将元素img 之前附加到HTML。
最近最常见的菜鸟错误：在该循环中，您创建了具有相同ID的多个元素。但是id必须是唯一的。

这里是http://jsfiddle.net/Smollet92/dwx1mb4a/4/（由于某些原因，由于这段代码给出了脚本错误）

Answer 2

如果您尝试为尚未构建的属性赋值，也可能发生这种情况。将脚本链接放在之前而不是将解决问题。

使用变量来源

2 个答案: