Vue生成动态picture组件时默认img图片始终加载的问题求助

核心问题原因 #

浏览器强制加载<img>标签，通常是因为<source>标签存在语法错误，导致浏览器无法识别对应格式，直接降级到默认图片。以下是具体排查点和修正方案：

必查语法错误点 #

1. <source>的type属性拼写错误 #

这是最常见的问题，必须严格匹配标准MIME类型：

• AVIF格式：type="image/avif"（不能写成image/x-avif或其他变体）
• WebP格式：type="image/webp"（不要写错成image/webp-jpeg之类的错误值）

2. <source>与<img>的顺序错误 #

<picture>标签按从上到下的顺序匹配第一个浏览器支持的格式，必须把优先级高的格式（AVIF → WebP）放在<img>前面。反过来写的话，浏览器会直接加载<img>：

<!-- 正确顺序 -->
<picture>
  <source type="image/avif" srcset="...">
  <source type="image/webp" srcset="...">
  <img src="fallback.jpg" alt="...">
</picture>

<!-- 错误顺序：一定会加载img -->
<picture>
  <img src="fallback.jpg" alt="...">
  <source type="image/avif" srcset="...">
</picture>

3. srcset语法格式错误 #

如果计算属性生成的是多分辨率srcset，必须严格遵循"路径 宽度描述, 路径 宽度描述"的格式：

• 单张图：直接写图片路径即可，比如"image.avif"
• 多分辨率：比如"image-400w.avif 400w, image-800w.avif 800w"
  注意：宽度描述必须加w单位，不能只写数字；多个资源用逗号分隔，前后可加空格

4. 资源路径无效 #

如果<source>的srcset指向的资源不存在（返回404），浏览器会自动降级到<img>的图片。可以通过浏览器开发者工具的Network面板查看资源请求状态。

Vue组件修正示例 #

<template>
  <picture>
    <!-- 先匹配AVIF -->
    <source
      :srcset="avifSrcSet"
      type="image/avif"
    >
    <!-- 再匹配WebP -->
    <source
      :srcset="webpSrcSet"
      type="image/webp"
    >
    <!-- 最后降级到默认图片 -->
    <img
      :src="fallbackSrc"
      :alt="altText"
      :loading="loading"
    >
  </picture>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  baseName: String,
  alt: String,
  widths: {
    type: Array,
    default: () => [400, 800, 1200]
  }
})

// 生成AVIF格式的srcset
const avifSrcSet = computed(() => {
  return props.widths.map(w => `${props.baseName}-${w}w.avif ${w}w`).join(', ')
})

// 生成WebP格式的srcset
const webpSrcSet = computed(() => {
  return props.widths.map(w => `${props.baseName}-${w}w.webp ${w}w`).join(', ')
})

// 降级用的默认图片
const fallbackSrc = computed(() => `${props.baseName}-800w.jpg`)
const altText = computed(() => props.alt || '')
</script>

静态HTML测试验证 #

如果静态页面测试仍有问题，直接写最简代码排查：

<picture>
  <source srcset="test.avif" type="image/avif">
  <source srcset="test.webp" type="image/webp">
  <img src="test.jpg" alt="测试图片">
</picture>

打开浏览器Network面板，查看实际加载的资源：

• 支持AVIF的浏览器（如Chrome 85+）：只加载test.avif
• 支持WebP但不支持AVIF的浏览器：只加载test.webp
• 都不支持的浏览器：加载test.jpg

如果还是加载test.jpg，优先检查type属性拼写，再检查资源是否存在。

内容的提问来源于stack exchange，提问作者Apophis