Question

使用变量源时无法将属性“src”设置为 null

2018-12-21

2886

javascript html image error-handling variable-declaration

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

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 。使用模板文字将避免此类错误。
您遇到 src of null 错误，因为您试图在 将元素 img 附加到 HTML 之前获取它。
最后也是最常见的新手错误：在该循环中，您创建了具有相同 id 的多个元素。但 id 必须是唯一的。

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

Answer 2

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