为什么我的Vue项目中使用WebP图片在某些浏览器显示异常？

Designer°逸翔提问于 2026-02-15 01:19:23 阅读 83

优化

我在Vue项目里尝试用WebP格式优化图片资源，用标签直接引入.webp文件。在Chrome/Firefox都能正常显示，但测试时发现IE11和旧版Safari（比如14.1）显示空白。我检查过文件路径没问题，转换工具生成的WebP文件也没报错。

试过把改成，但问题依旧。控制台没有报错提示，开发者工具里看到图片请求返回状态是200，但内容显示为空白块。有啥可能没考虑到的兼容性问题吗？



  <div class="image-container">
    <img 
      :src="require(@/assets/${item}.webp)" 
      alt="optimized image"
      class="lazy-load"
    >
  </div>

WebP格式资源优化

我来解答赞 11 收藏

反馈

2 条解答

司马智慧 Lv1

IE11和旧版Safari不支持WebP是根本原因。你请求能返回200说明服务器没问题，但浏览器解码不了这种格式就直接给你显示空白块。

你试的那个写法不太对，type属性得用在source标签上，不是img上。

最直接的解决方案是用picture标签做兜底：



  

  
    :src="require(@/assets/${item}.jpg)" 

    alt="optimized image"

    class="lazy-load"

  >

这样浏览器会先尝试加载WebP，不支持的话就自动fallback到jpg。

如果你只有webp格式不想改，那还有个偏方——用CSS的@supports做检测，给不支持的浏览器用占位图或者干脆回退到其他格式：

@supports not (background-image: url('/test.webp')) {

  .image-container {

    background-image: url('/fallback.jpg');

  }

}

不过更推荐的做法是让后端或者CDN支持自动返回合适格式，比如CDN的WebP/AVIF自适应，或者你构建的时候同时生成webp和jpg两套，用picture标签引入。

还有一点提醒，IE11连Vue2都有兼容问题，你确定项目本身跑起来了？有些项目会打polyfill包，如果图片这块也想完美兼容趁早加兜底方案比较省心。

2026-03-19 13:26

W″景叶 Lv1

WebP格式在兼容性上确实有点坑，像IE11和旧版Safari（比如你提到的14.1）是不支持WebP的。问题的核心在于，这些浏览器压根不认识这种图片格式，所以即使文件加载成功了，它们也没办法渲染出来。

更好的写法是采用一种回退机制，给不支持WebP的浏览器提供一个替代方案，比如JPEG或PNG格式的图片。可以通过HTML的标签来实现，它允许我们为不同浏览器指定多个来源。

代码可以这么写：

<div class="image-container">

  <picture>

    <source :srcset="require('@/assets/${item}.webp')" type="image/webp">

    <img 

      :src="require('@/assets/${item}.jpg')" 

      alt="optimized image"

      class="lazy-load"

    >

  </picture>

</div>

这里的关键点是标签会优先尝试加载中指定的WebP图片，如果浏览器不支持WebP格式，就会自动回退到标签里的JPEG图片。

另外，如果你用的是Vue的动态路径，记得确保require能正确解析文件路径。如果路径有问题，可能会导致打包后找不到资源。推荐把图片放到静态资源目录下，并使用相对路径或者通过Webpack配置别名来管理。

还有一点需要注意，懒加载逻辑可能会影响回退效果。如果你用了第三方库（比如vue-lazyload），要确保它能正确处理标签的场景。如果不行，可以考虑手动实现懒加载逻辑。

总之，这种兼容性问题是WebP推广中的常见痛点，解决思路就是「优雅降级」——让现代浏览器享受高性能的WebP，同时给老旧浏览器一个备选方案。这样一来，用户体验就不会因为技术选型而打折扣了。

2026-02-15 02:01