Невозможно установить свойство 'src' для null при использовании источника переменной - PullRequest
Новая
       83

Невозможно установить свойство 'src' для null при использовании источника переменной

0 голосов
/ 21 декабря 2018

Я видел, что этот вопрос задавался много раз, и я искал в каждом из них решение, но не смог найти его для своей конкретной проблемы.Я составляю ссылку, используя различные строки и переменные, и я хотел бы заполнить таблицу с изображениями.Пока что в большинстве потоков, которые решают эту проблему, я вижу следующую стратегию: 

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>

1 Ответ

0 голосов
/ 21 декабря 2018
  1. Вы забыли объединить переменную <img id="image" src='+link_for_picture+' border={0}.Использование литералов шаблона предотвратит ошибки такого рода.
  2. У вас ошибка src of null , потому что вы пытаетесь добраться до элемента img до добавления его в HTML.
  3. Последняя и самая распространенная ошибка новичка: в этом цикле вы создаете несколько элементов с одинаковым идентификатором.Но идентификатор должен быть уникальным.

Вот http://jsfiddle.net/Smollet92/dwx1mb4a/4/ (так как фрагмент SO по какой-то причине выдает ошибку сценария)

...