使用变量源时无法将属性“src”设置为 null
[英]Cannot set property 'src' of null when using variable source
问题描述
I saw that this question was asked many times and I've been looking in every single one for a solution but couldn't find one for my specific problem.
我看到这个问题被问了很多次，我一直在寻找每个问题的解决方案，但找不到针对我的特定问题的解决方案。 I'm composing a link using different strings and variables and I would like to fill in a table with images.我正在使用不同的字符串和变量组成一个链接，我想用图像填充表格。 So far, in most of the threads that tackle this problem, I can see the following strategy:到目前为止，在大多数解决这个问题的线程中，我可以看到以下策略：
document.getElementById('ID').src = variablewithlink;
or even this:甚至这个：
document.querySelector('img').src = variablewithlink;
Inserted in the html as:在html中插入为：
<img id="ID" src="" width="100" height="70";/>
And that's what I used in my code, but it still gives这就是我在代码中使用的，但它仍然给出
Uncaught TypeError: Cannot set property 'src' of null
When I'm logging the variable using alert , it shows the links that contain the images, but when reading it in the <img> tag, it gives that error.当我使用alert记录变量时，它会显示包含图像的链接，但是在<img>标签中读取它时，它会给出该错误。 Can anyone help me figure out what I am doing wrong?谁能帮我弄清楚我做错了什么？ The code is given below:代码如下：
<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>
2 个解决方案
解决方案1
2 已采纳 2018-12-21 18:58:11
- You forgot to concatenate variable
<img id="image" src='+link_for_picture+' border={0}.您忘记连接变量<img id="image" src='+link_for_picture+' border={0}。 Using template literals will prevent this kind of errors.使用模板文字将防止这种错误。 - You have that src of null error because you're trying to get to the element
imgbefore appending it to the HTML.您有src 的 null错误，因为您试图在将元素img附加到 HTML之前获取它。 - Last and most common rookie mistake: in that loop you create multiple elements with same id.最后也是最常见的新手错误：在该循环中，您创建了多个具有相同 id 的元素。 But id must be unique.但 id 必须是唯一的。
Here is http://jsfiddle.net/Smollet92/dwx1mb4a/4/ (because SO snippet is giving script error for some reason)这是http://jsfiddle.net/Smollet92/dwx1mb4a/4/ （因为 SO 片段由于某种原因给出了脚本错误）
解决方案2
0 2021-07-16 08:04:13
It could also happen if you try to assign a value to a property that is not build yet.如果您尝试为尚未构建的属性赋值，也可能发生这种情况。 Placing the script link just before instead of will solve the problem.将脚本链接放在之前而不是将解决问题。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.