1. 模块介绍

1.1 什么是 @nuxt/image？

@nuxt/image 是 Nuxt.js 官方推出的图像优化模块，提供了自动化的图像处理、优化和响应式解决方案。它支持多种图像提供商（如 Cloudinary、Imgix 等），并内置了本地图像处理功能。

1.2 核心特性

• 自动优化：压缩、格式转换（WebP/AVIF）
• 响应式图像：自动生成多尺寸版本
• 懒加载：提升页面加载性能
• CDN 集成：支持主流图像 CDN 服务
• 开发友善：热重载、TypeScript 支持

2. 安装与配置

2.1 安装

# 使用 npm
npm install @nuxt/image

# 使用 yarn
yarn add @nuxt/image

# 使用 pnpm
pnpm add @nuxt/image

2.2 基础配置

// nuxt.config.js
export default {
  modules: [
    '@nuxt/image'
  ],
  
  image: {
    // 基本配置
    dir: 'assets/images', // 图像目录
    quality: 80, // 默认质量
    formats: ['webp', 'avif', 'jpeg'], // 支持格式
    
    // 提供商配置
    provider: 'ipx', // 默认使用本地处理
    screens: {
      xs: 320,
      sm: 640,
      md: 768,
      lg: 1024,
      xl: 1280,
      xxl: 1536
    }
  }
}

2.3 多提供商配置

// nuxt.config.js
export default {
  image: {
    providers: {
      // 本地处理
      ipx: {},
      
      // Cloudinary 配置
      cloudinary: {
        baseURL: 'https://res.cloudinary.com/your-cloud-name/image/upload/'
      },
      
      // Imgix 配置
      imgix: {
        baseURL: 'https://your-domain.imgix.net/'
      },
      
      // 静态资源
      static: {}
    },
    
    // 设置默认提供商
    provider: 'ipx'
  }
}

3. 核心组件使用

3.1 nuxt-img 组件

<template>
  <div>
    <!-- 基本用法 -->
    <nuxt-img
      src="/images/hero.jpg"
      alt="Hero Image"
      width="800"
      height="400"
    />
    
    <!-- 响应式尺寸 -->
    <nuxt-img
      src="/images/product.jpg"
      :sizes="'sm:100vw md:50vw lg:400px'"
      alt="Responsive Product"
    />
    
    <!-- 质量与格式控制 -->
    <nuxt-img
      src="/images/photo.jpg"
      :modifiers="{ quality: 90, format: 'webp' }"
      alt="Optimized Image"
    />
  </div>
</template>

3.2 nuxt-picture 组件

<template>
  <div>
    <!-- 多格式支持 -->
    <nuxt-picture
      src="/images/artwork.jpg"
      alt="Artwork with multiple formats"
      :img-attrs="{ class: 'artwork-image' }"
      sizes="sm:100vw md:50vw lg:33vw"
      :modifiers="{
        quality: 85,
        format: 'webp'
      }"
    />
    
    <!-- 艺术指导（Art Direction） -->
    <nuxt-picture>
      <source
        srcset="/images/hero-mobile.jpg"
        media="(max-width: 768px)"
        sizes="100vw"
      />
      <source
        srcset="/images/hero-desktop.jpg"
        media="(min-width: 769px)"
        sizes="100vw"
      />
      <img
        src="/images/hero-desktop.jpg"
        alt="Responsive Hero"
        class="hero-img"
      />
    </nuxt-picture>
  </div>
</template>

4. 高级功能与优化技巧

4.1 懒加载与占位符

<template>
  <div>
    <!-- 懒加载 -->
    <nuxt-img
      src="/images/large-banner.jpg"
      loading="lazy"
      placeholder
      alt="Lazy loaded image"
    />
    
    <!-- 自定义占位符 -->
    <nuxt-img
      src="/images/product-gallery.jpg"
      :placeholder="[50, 25, 10]"
      alt="Image with blur placeholder"
    />
  </div>
</template>

<style>
.blur-up {
  filter: blur(5px);
  transition: filter 0.3s;
}

.blur-up.lazy-loaded {
  filter: blur(0);
}
</style>

4.2 性能优化配置

// nuxt.config.js
export default {
  image: {
    // 性能优化配置
    presets: {
      avatar: {
        modifiers: {
          width: 50,
          height: 50,
          fit: 'cover'
        }
      },
      cover: {
        modifiers: {
          width: 800,
          height: 400,
          fit: 'cover'
        }
      }
    },
    
    // 预加载关键图像
    preload: ['/images/above-the-fold.jpg']
  }
}

4.3 在组件中使用预设

<template>
  <div>
    <!-- 使用预设 -->
    <nuxt-img
      src="/images/user-avatar.jpg"
      preset="avatar"
      alt="User Avatar"
    />
    
    <!-- 覆盖预设选项 -->
    <nuxt-img
      src="/images/blog-cover.jpg"
      preset="cover"
      :modifiers="{ ...$preset.cover, quality: 95 }"
      alt="Blog Cover"
    />
  </div>
</template>

5. 实际应用案例

5.1 电商产品图库

<template>
  <div class="product-gallery">
    <!-- 主图 -->
    <nuxt-img
      :src="mainImage"
      :alt="product.name"
      sizes="sm:100vw md:60vw lg:50vw"
      class="main-image"
      @click="openLightbox"
    />
    
    <!-- 缩略图列表 -->
    <div class="thumbnails">
      <nuxt-img
        v-for="(thumb, index) in product.thumbnails"
        :key="index"
        :src="thumb"
        :alt="`${product.name} - View ${index + 1}`"
        width="100"
        height="100"
        @click="selectImage(index)"
        class="thumbnail"
      />
    </div>
    
    <!-- 图片查看器 -->
    <div v-if="showLightbox" class="lightbox">
      <nuxt-img
        :src="lightboxImage"
        :alt="product.name"
        sizes="90vw"
        class="lightbox-image"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      product: {
        name: 'Premium Headphones',
        images: [
          '/products/headphones-1.jpg',
          '/products/headphones-2.jpg',
          '/products/headphones-3.jpg'
        ],
        thumbnails: [
          '/products/headphones-thumb-1.jpg',
          '/products/headphones-thumb-2.jpg',
          '/products/headphones-thumb-3.jpg'
        ]
      },
      mainImage: '/products/headphones-1.jpg',
      showLightbox: false,
      lightboxImage: ''
    }
  },
  methods: {
    selectImage(index) {
      this.mainImage = this.product.images[index]
    },
    openLightbox() {
      this.lightboxImage = this.mainImage
      this.showLightbox = true
    }
  }
}
</script>

5.2 博客文章图片优化

<template>
  <article class="blog-post">
    <header>
      <nuxt-img
        :src="article.coverImage"
        :alt="article.title"
        sizes="100vw"
        class="cover-image"
      />
    </header>
    
    <div class="content">
      <h1>{{ article.title }}</h1>
      
      <!-- 内容中的图片 -->
      <div v-html="article.content"></div>
      
      <!-- 图库部分 -->
      <div class="image-gallery">
        <nuxt-img
          v-for="(image, index) in article.gallery"
          :key="index"
          :src="image.src"
          :alt="image.alt"
          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
          class="gallery-image"
          loading="lazy"
        />
      </div>
    </div>
  </article>
</template>

<script>
export default {
  async asyncData({ $content, params }) {
    const article = await $content('articles', params.slug).fetch()
    return { article }
  }
}
</script>

6. 服务端渲染与 API 使用

6.1 服务端图像处理

// 在 API 路由或中间件中使用
export default defineEventHandler(async (event) => {
  const { getImage } = useImage()
  
  // 获取优化后的图像 URL
  const optimizedUrl = getImage('/images/original.jpg', {
    width: 800,
    quality: 85,
    format: 'webp'
  })
  
  return { image: optimizedUrl }
})

6.2 自定义图像转换

// composables/useImageOptimizer.js
export const useImageOptimizer = () => {
  const { $img } = useNuxtApp()
  
  const optimizeImage = (src, options = {}) => {
    const defaultOptions = {
      width: 1200,
      quality: 80,
      format: 'webp'
    }
    
    return $img(src, { ...defaultOptions, ...options })
  }
  
  return { optimizeImage }
}

7. 最佳实践与性能监控

7.1 性能监控配置

// nuxt.config.js
export default {
  image: {
    // 性能监控
    onError: (error, { src, input }) => {
      console.error('Image loading error:', error)
      // 发送错误日志到监控服务
    },
    
    // 性能预算
    performance: {
      maxWidth: 1920,
      maxHeight: 1080
    }
  }
}

7.2 错误处理与降级方案

<template>
  <div>
    <nuxt-img
      :src="imageSrc"
      :alt="imageAlt"
      @error="handleImageError"
      class="content-image"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageSrc: '/images/primary.jpg',
      fallbackImage: '/images/fallback.jpg'
    }
  },
  methods: {
    handleImageError(event) {
      console.warn('Image failed to load, using fallback')
      event.target.src = this.fallbackImage
    }
  }
}
</script>

8. 总结

@nuxt/image 模块为 Nuxt.js 应用提供了完整的图像优化解决方案。通过合理配置和使用，可以显著提升网站性能、用户体验和 SEO 表现。关键要点包括：

• 选择合适的提供商：根据项目需求选择本地处理或 CDN 服务
• 合理设置尺寸：根据断点配置合适的图像尺寸
• 利用懒加载：对非关键图像启用懒加载
• 监控性能：设置图像性能预算和错误处理
• 保持更新：关注模块更新，利用新特性持续优化

文章内容涵盖了 @nuxt/image 的核心概念和实际应用，提议在实际项目中逐步实践这些技术点。