我尝试使用 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>