Question

我正在尝试使用javascript获取并设置图片src，并且不断收到此错误，未捕获的TypeError：无法读取null的属性“ src”。我搜索了Stackoverflow，找不到解决方案。这是我的代码

<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
  <div class="modal-content">
   <div class="modal-header">
     <h5 class="modal-title" id="exampleModalLongTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
  <span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body" id="modalBody">
  <img src="" id="modalImg">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>

<script>
function viewProduct(product_id){
var request = new XMLHttpRequest();
request.open('GET', '/view_product_details/?product_id=' + product_id, true);
request.onreadystatechange = function(){
    if (this.status == 200 && this.readyState == 4){
        var data = JSON.parse(this.responseText);
        console.log(data);
        document.getElementById('exampleModalLongTitle').innerHTML = data.name
        document.getElementById('modalBody').innerHTML = data.description
        //document.getElementById('modalImg').setAttribute('src', data.image_url)
        document.getElementById('modalImg').src = data.image_url
    }
}
request.send();
}
 </script>

Answer 1

document.getElementById('modalBody').innerHTML正在擦除图像元素。

尝试使用insertAdjacentHTML代替innerHTML：

document.getElementById('modalBody').insertAdjacentHTML('afterbegin', data.description);

'afterbegin'：在元素内部，在其第一个子元素之前。

Answer 2

我通过将<img src="" id="modalImg">内的<div class="modal-body" id="modalBody"> <img src="" id="modalImg"> </div>移到

上来解决了这个问题。

      <img src="" id="modalImg">
      <div class="modal-body" id="modalBody">
     </div>

Javascript无法读取null的属性“ src”

2 个答案: