NuxtImg的src固有尺寸无法随屏幕大小变化的问题排查

问题核心 #

你遇到的问题本质是：NuxtImg生成的srcset中所有图片URL完全一致，没有携带宽度参数（比如?w=100），导致浏览器无论屏幕尺寸如何变化，都会下载同一张原图，无法触发尺寸切换。

从你提供的输出可以看到，srcset里的每个条目都是同一个https://...image.webp，仅在末尾添加了1w/2w等标识，但这些URL并未指向不同尺寸的图片资源，自然无法实现按需加载。

解决步骤 #

1. 配置允许的外部图片域名 #

Nuxt Image默认会限制可处理的图片域名，首先需要在nuxt.config.ts中添加你的图片域名到domains数组，确保Nuxt有权处理该域名下的图片：

export default defineNuxtConfig({
  image: {
    domains: ['你的图片域名.com'] // 替换为实际图片的域名
  }
})

2. 配置合适的图片Provider #

如果你的图片存储在第三方服务（如Cloudinary、Imgix），需要指定对应的Provider；如果是自定义图片服务，需配置自定义Provider来生成带宽度参数的URL。

自定义Provider示例（假设服务通过?w=参数指定宽度）

首先在nuxt.config.ts中注册Provider：

export default defineNuxtConfig({
  image: {
    domains: ['你的图片域名.com'],
    providers: {
      custom: {
        name: 'custom',
        provider: '~/providers/custom-image.ts',
        options: {
          baseURL: 'https://你的图片域名.com/'
        }
      }
    }
  }
})

然后在~/providers/custom-image.ts中实现图片URL处理逻辑：

import type { ImageProvider } from '@nuxt/image'

export default {
  getImage(src: string, options: any) {
    const url = new URL(src)
    if (options.width) {
      url.searchParams.set('w', options.width.toString())
    }
    return { url: url.toString() }
  }
} as ImageProvider

最后在NuxtImg中指定使用该Provider：

<NuxtImg
  provider="custom"
  :src="https://...image.webp"
  sizes="100vw sm:50vw md:100px"
  loading="eager"
  class="aspect-3/2 w-full bg-gray-50 object-cover sm:absolute sm:inset-0 sm:aspect-auto sm:h-full"
/>

3. 手动指定widths属性 #

默认情况下NuxtImg会生成一些预设宽度的srcset条目，你可以手动指定需要的宽度，确保生成的srcset包含匹配sizes规则的尺寸：

<NuxtImg
  :src="https://...image.webp"
  sizes="100vw sm:50vw md:100px"
  :widths="[100, 200, 320, 640]"
  loading="eager"
  class="aspect-3/2 w-full bg-gray-50 object-cover sm:absolute sm:inset-0 sm:aspect-auto sm:h-full"
/>

4. 明确sizes的作用 #

sizes属性是告知浏览器「这张图片在当前屏幕尺寸下的显示宽度」，浏览器会根据这个值计算所需的图片像素宽度，再从srcset中选择最匹配的资源。如果srcset里没有对应尺寸的有效URL（全是同一个原图），浏览器自然无法切换图片。

验证 #

配置完成后，查看生成的srcset，应该会看到类似如下的URL结构：

https://你的图片域名.com/...image.webp?w=100 100w,
https://你的图片域名.com/...image.webp?w=200 200w,
...

此时调整窗口大小，浏览器就会根据sizes规则自动下载对应尺寸的图片了。

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