Vue项目用了WebP图片但旧浏览器显示不出来怎么办？

Top丶娅廷提问于 2026-02-19 11:53:25 阅读 14

优化

最近在Vue项目里把图片都换成WebP格式了，发现Chrome显示正常，但测试IE11和部分安卓机完全看不到图片。我查了文档知道这些浏览器不支持WebP，试过用标签加srcset属性：

<img src="image.webp" type="image/webp" alt="示例">

但还是不行。有没有什么兼容方案既能用WebP又能回退到JPEG？之前用过图片服务器自动转换，但公司服务器不支持动态格式转换…

WebP格式资源优化

我来解答赞 6 收藏

反馈

1 条解答

梓玥 Lv1

省事的话，直接用标签做回退方案，代码如下：

<picture>

  <source srcset="image.webp" type="image/webp">

  <img src="image.jpg" alt="示例">

</picture>

浏览器支持 WebP 就会加载 image.webp，不支持就自动回退到 image.jpg。简单粗暴，不用折腾服务器配置。

2026-02-19 12:02