使用Webpack图片加载器时IE/Edge、Firefox图片不显示问题求助

看起来你遇到的核心问题是浏览器对WebP格式的兼容性——虽然服务器返回的MIME是image/jpg，但Webpack可能在打包时偷偷把图片转成了WebP格式，而IE、旧Edge以及部分旧版Firefox并不支持WebP，这就导致了解码失败的错误。下面给你一步步排查和解决的方案：

1. 先检查Webpack的图片处理配置 #

首先确认你的Webpack配置里是不是用了类似image-webpack-loader这类插件，并且开启了WebP转换但没做降级处理。比如很多人会写这样的配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          'file-loader',
          {
            loader: 'image-webpack-loader',
            options: {
              webp: {
                quality: 80
              }
            }
          }
        ]
      }
    ]
  }
};

这种配置会直接把JPG/PNG转成WebP，但完全没考虑老浏览器的兼容问题。

2. 配置兼容的图片输出策略 #

你需要让Webpack同时生成WebP和原格式的图片，然后在代码中根据浏览器支持性选择加载：

方案一：在JS中动态判断加载 #

修改Webpack配置，让file-loader保留原文件名，同时生成WebP版本：

{
  test: /\.(png|jpe?g|gif)$/i,
  use: [
    {
      loader: 'file-loader',
      options: {
        name: '[name].[ext]',
        outputPath: 'images/'
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        webp: {
          quality: 80,
          // 生成WebP时保留原格式文件
          overrideExtension: false
        }
      }
    }
  ]
}

然后在JS中检测浏览器是否支持WebP，再选择对应的图片：

// 检测WebP支持性
async function supportsWebP() {
  if (!self.createImageBitmap) return false;
  const webpData = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAABBxAR/Q9ERP8DAABWUDggGAAAADABAJ0BKgEAAQADADQlpAADcAD++/1QAA==';
  const blob = await fetch(webpData).then(r => r.blob());
  return createImageBitmap(blob).then(() => true, () => false);
}

// 动态加载图片
async function loadTargetImage() {
  const imgElement = document.getElementById('target-image');
  const isWebPSupported = await supportsWebP();
  imgElement.src = isWebPSupported ? './images/photo.webp' : './images/photo.jpg';
}

方案二：在SCSS中用Modernizr做降级 #

如果是在CSS中使用背景图，可以借助Modernizr检测WebP支持，然后写兼容样式：

// 支持WebP的浏览器加载WebP图
.webp .bg-banner {
  background-image: url('./images/banner.webp');
}
// 不支持的浏览器降级加载原格式
.no-webp .bg-banner {
  background-image: url('./images/banner.jpg');
}

记得在项目中引入Modernizr并开启WebP检测功能。

3. 修复MIME类型不匹配问题 #

Edge提示的DOM7009错误，也可能是因为Webpack输出的图片后缀是.jpg，但实际内容是WebP，导致浏览器解析混乱。解决方法：

• 确保Webpack生成的WebP图片后缀是.webp，原格式保留原后缀，避免后缀和实际格式不匹配。
• 检查服务器配置，确保.webp文件对应的MIME类型是image/webp，.jpg对应image/jpeg，避免服务器返回错误的MIME标识。

4. 针对IE/旧Edge的极简处理 #

如果你的项目必须兼容IE11及以下，直接禁用WebP转换更简单，修改image-webpack-loader的配置：

{
  loader: 'image-webpack-loader',
  options: {
    webp: false // 关闭WebP转换，保留原格式
  }
}

这样所有图片都会以原始格式输出，老浏览器就能正常显示了。

按照上面的步骤排查和调整，应该就能解决Firefox、IE和Edge的图片显示问题啦！

内容的提问来源于stack exchange，提问作者Javier Muñoz Tous