Javascript 无法读取属性'；src&x27；空的

当我点击它时，我正在尝试缩放图像。我使用百里香叶作为引擎来显示我的图像

<div th:each="pic : ${pjWrapper.cars}" class="col-md-55">
  <div class="image view view-first">
    <img th:id="${'img_' + picStat.index}" th:src="${pic.url}" alt="image" />
    <div class="mask" th:id="${picStat.index}" onclick="zoom(event)">
      <p  th:text="${pic.name}">&nbsp;</p>
      <div class="tools tools-bottom">
      </div>
    </div>
  </div>
</div>

这是模态

<!-- Modal -->
<div id="img-zoom-modal" class="img-zoom-modal">
  <span class="img-zoom-close">&times;</span>
  <img class="modal-content" id="modalImg">
  <div id="img-zoom-caption"></div>
</div>

&时代；
关闭模态的元素
var span=document.getElementsByClassName（“img缩放关闭”）[0]；
modal.onclick=function（）{
modal.style.display=“无”；
}
span.onclick=function（）{
modal.style.display=“无”；
}
}

当我在不同的图像上单击更多次时，会出现以下错误：

uncaughttypeerror:无法读取上面
modalImg.src=img.src

我的灵感来自本教程

你知道我为什么会出现这个错误吗？
你之所以会出现这个错误，是因为
document.querySelector（'#img_u'+e.target.id）为
null
。这意味着找不到具有该id的元素。我确认该元素已正确生成，并且存在于htmlI中。我将尝试调试该元素并添加
console.log（document.querySelector（'#img_'+e.target.id），#img_'+e.target.id
）。现在我不明白为什么img变量应该为null。哦，等等，我明白了，
e.target
不一定是您将click事件绑定到的div。所以
e.target.id
不是您想要的。将其更改为
e.currentTarget.id
可以解决此问题。它使用
e.currentTarget.id
工作。非常感谢。
function zoom(e) {
    var modal = document.querySelector("#img-zoom-modal");
    var img = document.querySelector('#img_' + e.target.id);
    var modalImg = document.querySelector('#modalImg');
    var captionText = document.querySelector('#img-zoom-caption');
    
    modal.style.display = "block";
    modalImg.src = img.src;    // THIS LINE RETURN ERROR  img is null
    captionText.innerHTML = img.alt;
    // Get the <span> element that closes the modal
    var span = document.getElementsByClassName("img-zoom-close")[0];
    
    modal.onclick = function() { 
        modal.style.display = "none";
    }
    span.onclick = function() { 
        modal.style.display = "none";
    }
}