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

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

优化

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

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

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

WebP格式资源优化

我来解答赞 14 收藏

反馈

2 条解答

程序猿智慧 Lv1

这个问题用picture标签就能解决，比srcset好用多了。srcset是用来处理不同分辨率的，不是用来做格式回退的。

最直接的方案：picture标签

<picture>

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

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

</picture>

浏览器会按顺序从上往下读，遇到支持的格式就停下来，不支持的自动fallback到下面的img标签。IE11和旧安卓机虽然不认识webp，但会跳过source直接加载jpg。

Vue里可以封装成一个组件：

<template>

  <picture v-if="webpSupported">

    <source :srcset="webpSrc" type="image/webp">

    <img :src="jpgSrc" :alt="alt">

  </picture>

  <img v-else :src="jpgSrc" :alt="alt">

</template>



<script>

export default {

  props: {

    webpSrc: String,

    jpgSrc: String,

    alt: String

  },

  data() {

    return {

      webpSupported: true

    }

  },

  mounted() {

    const img = new Image();

    img.onload = () => { this.webpSupported = true };

    img.onerror = () => { this.webpSupported = false };

    img.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoCAAEAAQAcJaQAA3AA/v3AgAA=';

  }

}

</script>

这样用：

<webp-img webp-src="banner.webp" jpg-src="banner.jpg" alt="轮播图" />

不过picture标签方案更简洁，兼容性也更好，基本不用JS检测那一套。浏览器原生支持，IE11及以上都能工作。

如果你项目里图片特别多，一个一个改太麻烦，可以写个webpack loader或者写个全局的mixin来处理，不过那就是另外的话题了。

2026-03-14 14:02

梓玥 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