Firefox浏览器中Img标签背景图不显示问题求助

你遇到的是Firefox对空src属性的<img>元素的兼容性差异——Chrome、IE、Opera、Safari这类浏览器对空src的处理更宽松，但Firefox遵循更严格的渲染规则，导致背景图无法正常加载显示。

问题根源 #

你的代码里<img>标签的src属性是空的，仅通过style="background-image: ..."来展示图片。Firefox会判定空src的图片为无效资源，不会正确渲染这个<img>元素的背景图；而其他浏览器会忽略空src的异常，直接渲染背景图内容。

解决方案 #

这里有两种可行的修复方式，你可以根据需求选择：

方案1：给src添加透明占位符

给空src设置一个极小的透明base64图片，让Firefox认为这是一个有效图片元素，从而正常渲染背景图：

<section class="p-0" id="portfolio"> 
  <div class="container-fluid p-0"> 
    <div class="row no-gutters popup-gallery"> 
      <div class="col-lg-4 col-sm-6"> 
        <a class="portfolio-box" href="http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png"> 
          <!-- 添加透明base64占位符到src -->
          <img class="img-fluid" src="data:image/gif;base64,R0lGODlhAQABAIAAAMLCwgAAACH5BAAAAAAALAAAAAABAAEAAAICRAEAOw==" style="background-image: url('http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png');">
        </a>
      </div>
    </div>
  </div>
</section>

方案2：替换<img>为<div>（更推荐）

既然你是用背景图展示内容，而非<img>的原生src功能，直接用<div>代替<img>更符合语义，也能彻底避开浏览器兼容性问题：

<section class="p-0" id="portfolio"> 
  <div class="container-fluid p-0"> 
    <div class="row no-gutters popup-gallery"> 
      <div class="col-lg-4 col-sm-6"> 
        <a class="portfolio-box" href="http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png"> 
          <!-- 用div替换img，保留原有类名和样式 -->
          <div class="img-fluid" style="background-image: url('http://apache.techgorilla.io/wp-content/uploads/2018/04/ckG9Q85.png');"></div>
        </a>
      </div>
    </div>
  </div>
</section>

⚠️ 注意：如果使用<div>，需要确保它有明确的宽高（可以通过CSS设置，或继承父元素的尺寸），否则背景图可能无法正常显示。

补充说明 #

其他浏览器允许空src的<img>渲染背景图，其实是不符合规范的宽松处理。Firefox的逻辑更贴近标准，修复后不仅解决了当前问题，也让代码更规范严谨。

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