Cannot set property 'src' of null when using variable source

Question

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:

<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. 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>

What about this: content += '<td>' + '<img id="image" src=link_for_picture border={0} height={150} width={150}></img>' + '</td>' in the script? Doesn't that go as HTML? — CuriousPaul
– CuriousPaul, Commented Dec 21, 2018 at 18:25
oh, you forgot to concatenate variable '<img id="image" src='+link_for_picture+' border={0}' — Smollet777
– Smollet777, Commented Dec 21, 2018 at 18:28
and you have multiple id=image. Id must be unique. jsfiddle.net/Smollet92/dwx1mb4a/1 — Smollet777
– Smollet777, Commented Dec 21, 2018 at 18:31
Oh, wow. That was a quick-fix after sooo long. Thank you so much!!! — CuriousPaul
– CuriousPaul, Commented Dec 21, 2018 at 18:32

Smollet777 · Accepted Answer · 2018-12-21 18:58:11Z

2

You forgot to concatenate variable <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 img before appending it to the HTML.
Last and most common rookie mistake: in that loop you create multiple elements with same id. But id must be unique.

Here is http://jsfiddle.net/Smollet92/dwx1mb4a/4/ (because SO snippet is giving script error for some reason)

answered Dec 21, 2018 at 18:58

Smollet777

1,6461 gold badge16 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

CuriousPaul Over a year ago

Thank you for the answer and explanation. I will also change the ID's of each elements.

Himanshu Lahare · Accepted Answer · 2021-07-16 08:04:13Z

0

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.

answered Jul 16, 2021 at 8:04

Himanshu Lahare

395 bronze badges

Collectives™ on Stack Overflow

Cannot set property 'src' of null when using variable source

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related