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

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

优化

我在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格式资源优化

我来解答赞 6 收藏

反馈

1 条解答

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