点击画廊图片插入模态框无渲染无报错问题排查

• DOM选择器匹配错误
  首先确认你选取模态框内img元素的选择器完全正确，注意拼写、大小写、选择器符号不要写错（id要加#、类要加.）。如果你的模态框是条件渲染的（比如只有触发显示时才插入DOM），点击事件触发时模态框内的img元素可能还没完成挂载，直接赋值不会生效，可以加个元素存在性判断再操作：

  const modalImg = document.querySelector('#modal-preview-img')
  const clickedImgUrl = '你获取到的点击图片地址'
  if (modalImg) {
    modalImg.src = clickedImgUrl
  }
  

• 图片URL取值错误
  确认你从点击元素上取到的URL是有效值，如果你是存在自定义属性里，要通过dataset取值，不要直接取属性名。赋值前可以先打印取值结果确认有效性：

  // 假设画廊img写为 <img class="gallery-item" src="缩略图地址" data-origin="原图地址">
  document.querySelectorAll('.gallery-item').forEach(img => {
    img.addEventListener('click', e => {
      // 用e.currentTarget取绑定事件的元素，避免点击到子元素取值失败
      const originUrl = e.currentTarget.dataset.origin || e.currentTarget.src
      console.log('取到的图片地址', originUrl) // 确认地址可正常访问
      const modalImg = document.querySelector('#modal-preview-img')
      if (modalImg) modalImg.src = originUrl
    })
  })
  

• 赋值被其他逻辑覆盖
  如果你用了前端框架（Vue/React等），不要直接操作DOM给img赋值src，要修改绑定的响应式变量，否则响应式更新时你赋的src会被框架覆盖为空。如果你用的是第三方模态框组件，要优先用组件提供的图片属性传值，不要直接修改组件内部的原生img标签src，部分组件自带的懒加载、占位逻辑会拦截原生src赋值。
• 事件绑定目标异常
  如果你给画廊外层容器绑定了事件委托，要判断命中的目标是img元素再取值，避免点到容器内其他元素时取不到src导致赋值为空。

内容的提问来源于stack exchange，提问作者rojey12