使用Nuxt Booster的Nuxt Image无法设置理想尺寸及动态传参问题

问题1：图片加载模糊+大屏尺寸失控 #

核心原因 #

• 大屏（lg/xl/xxl）的sizes配置为100vw，导致图片被拉伸到全屏宽度，若原图分辨率不足就会模糊
• 默认的低质量占位图（LQIP）质量过低，加载初期显示模糊
• 未指定响应式宽度，Nuxt Image无法生成匹配大屏的最优尺寸图片

修复步骤 #

1. 调整响应式尺寸与sizes规则
   在source配置中添加width响应式参数，同时修改sizes为大屏设置最大宽度限制，避免图片过度拉伸：

   defineProps({
     source: {
       type: Object,
       default() {
         return {
           format: 'webp',
           src: '/img/slider/slider-img-1.webp',
           quality: 80, // 提升生成图片的质量
           width: { // 针对不同断点设置基础宽度
             default: 1920, // 大屏基础宽度（适配2K屏）
             md: 1200,
             xs: 768
           },
           sizes: {
             default: 'min(1920px, 100vw)', // 大屏最大宽度1920px，超出则自适应
             xxs: '100vw',
             xs: '50vw',
             sm: '50vw',
             md: '100vw',
             lg: 'min(1920px, 100vw)',
             xl: 'min(1920px, 100vw)',
             xxl: 'min(1920px, 100vw)'
           },
           placeholder: 'blur',
           blurOptions: { quality: 40 } // 提升模糊占位图的质量，减少加载初期模糊感
         }
       }
     },
     title: String,
     alt: String
   });
   

2. 确保原图分辨率充足
   大屏使用的原图分辨率至少要达到1920px（Retina屏需翻倍至3840px），避免缩放后模糊。

3. 检查Nuxt Image全局配置
   在nuxt.config.ts中确认图片处理配置正确，确保本地图片能被正确优化：

   export default defineNuxtConfig({
     modules: ['nuxt-booster'],
     image: {
       dir: 'public/img', // 本地图片存放目录
       presets: {
         default: {
           formats: ['webp'],
           quality: 80
         }
       }
     }
   })
   

问题2：动态循环内容传入source属性 #

实现思路 #

在父组件中通过v-for循环遍历动态数据，将每个项的图片信息合并到source对象中传递给子组件；若子组件有默认的source配置，可通过计算属性合并传入值与默认值，减少重复代码。

代码示例 #

父组件（循环动态内容）

<template>
  <div class="slider-container">
    <!-- 遍历动态轮播数据 -->
    <SliderItem
      v-for="(slide, idx) in sliderData"
      :key="idx"
      :source="{ src: slide.imagePath }" <!-- 仅传递动态图片路径，其他用子组件默认配置 -->
      :title="slide.title"
      :alt="slide.altText"
    />
  </div>
</template>

<script setup>
// 模拟动态数据（可从接口获取）
const sliderData = [
  {
    imagePath: '/img/slider/slider-img-1.webp',
    title: '轮播图1',
    altText: '轮播图1描述'
  },
  {
    imagePath: '/img/slider/slider-img-2.webp',
    title: '轮播图2',
    altText: '轮播图2描述'
  }
]
</script>

子组件（合并默认与传入的source）

<template>
  <BoosterImage v-bind="{ source: mergedSource, title, alt }" critical />
</template>

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

const props = defineProps({
  source: {
    type: Object,
    default() {
      return {
        format: 'webp',
        quality: 80,
        width: { default: 1920, md: 1200, xs: 768 },
        sizes: {
          default: 'min(1920px, 100vw)',
          xxs: '100vw',
          xs: '50vw',
          sm: '50vw',
          md: '100vw',
          lg: 'min(1920px, 100vw)',
          xl: 'min(1920px, 100vw)',
          xxl: 'min(1920px, 100vw)'
        },
        placeholder: 'blur',
        blurOptions: { quality: 40 }
      }
    }
  },
  title: String,
  alt: String
})

// 合并传入的source与默认配置，传入值优先级更高
const mergedSource = computed(() => ({
  ...props.source.default(),
  ...props.source
}))
</script>

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