图片路径传入src及相关属性后无法显示的技术咨询

嘿，我之前也踩过这个一模一样的坑！你现在遇到的核心问题是：浏览器只会自动解析并加载<img>标签的标准src属性，而data-src、data-image这类带data-前缀的是自定义属性，本身不会触发图片加载——这类属性一般是给JavaScript做懒加载或者动态替换图片用的。

下面给你两种针对性的解决方案：

方案1：不需要懒加载，直接用标准src属性 #

如果你的场景不需要延迟加载图片，直接把data-src替换成src就可以了，这是最直接的解决办法：

<article class="eventlist-event eventlist-event--upcoming eventlist-event--hasimg eventlist-hasimg eventlist-event--multiday">
  <a class="eventlist-column-thumbnail content-fill" href=""> 
    <img class="eventlist-thumbnail" src="https://upload.wikimedia.org/wikipedia/commons/4/46/Lockheed_Martin_F-22A_Raptor_JSOH.jpg" alt="F-22 Raptor">
  </a>
</article>

注意：记得给图片加alt属性，这既是无障碍要求，也能在图片加载失败时显示替代文本

方案2：需要懒加载，用JavaScript触发图片加载 #

如果你的需求是懒加载（比如滚动到图片位置再加载），就需要写一段简单的JS代码，把data-src的值赋值给src属性：

<article class="eventlist-event eventlist-event--upcoming eventlist-event--hasimg eventlist-hasimg eventlist-event--multiday">
  <a class="eventlist-column-thumbnail content-fill" href=""> 
    <img class="eventlist-thumbnail" data-src="https://upload.wikimedia.org/wikipedia/commons/4/46/Lockheed_Martin_F-22A_Raptor_JSOH.jpg" alt="F-22 Raptor">
  </a>
</article>

<script>
// 页面加载完成后处理所有带data-src的图片
document.addEventListener('DOMContentLoaded', function() {
  const lazyImages = document.querySelectorAll('img[data-src]');
  lazyImages.forEach(img => {
    img.src = img.dataset.src;
    // 加载完成后可以移除data-src属性，避免重复处理
    img.removeAttribute('data-src');
  });
});
</script>

如果是更复杂的滚动懒加载，你可以用Intersection Observer API来监听图片是否进入视口，再触发加载，不过上面的代码足够解决基础的懒加载场景

额外检查点 #

• 确认你的图片路径是完整且有效的：你提供的示例里路径被截断了（https://upload.wikimedia...），要确保路径是完整的URL，没有拼写错误
• 检查浏览器控制台的Network面板，看图片请求是否返回404或其他错误，排查路径或服务器问题

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