[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"article-nuxt-image-mokuaixiandaituxiangyouhuayuguanlizhinan":3},{"id":4,"title":5,"slug":6,"summary":7,"content":8,"contentHtml":9,"wordCount":10,"readingTime":11,"categoryId":12,"tags":13,"coverImage":13,"thumbnail":13,"status":14,"isTop":15,"isRecommended":15,"allowComments":15,"password":13,"viewCount":16,"likeCount":15,"commentCount":15,"seoTitle":5,"seoKeywords":17,"seoDescription":18,"source":13,"sourceUrl":13,"publishTime":19},"2002406272140374017","Nuxt Image 模块：现代图像优化与管理指南","nuxt-image-mokuaixiandaituxiangyouhuayuguanlizhinan","## 1. 模块概述 ### 1.1 什么是 @nuxt\u002Fimage？ @nuxt\u002Fimage 是 Nuxt.js 官方推出的图像优化模块，提供了自动化的图像处理、优化和响应式解决方案。它支持多种图像提供商（如 Cloudinary、Imgix 等），并内置了本地图像处理功能。 ### 1.2 核心特性 - **自动优化**：压缩、格式转换（WebP\u002FAVIF） - **响应式图像**：自动生成多尺寸版本 - **懒加载**：提升页面加载性能 - **CDN 集成**：支持主流图像 CDN 服务 - **开发友好**：热重载、TypeScript 支持 ## 2.","## 1. 模块概述\n\n### 1.1 什么是 @nuxt\u002Fimage？\n@nuxt\u002Fimage 是 Nuxt.js 官方推出的图像优化模块，提供了自动化的图像处理、优化和响应式解决方案。它支持多种图像提供商（如 Cloudinary、Imgix 等），并内置了本地图像处理功能。\n\n### 1.2 核心特性\n- **自动优化**：压缩、格式转换（WebP\u002FAVIF）\n- **响应式图像**：自动生成多尺寸版本\n- **懒加载**：提升页面加载性能\n- **CDN 集成**：支持主流图像 CDN 服务\n- **开发友好**：热重载、TypeScript 支持\n\n## 2. 安装与配置\n\n### 2.1 安装\n```bash\n# 使用 npm\nnpm install @nuxt\u002Fimage\n\n# 使用 yarn\nyarn add @nuxt\u002Fimage\n\n# 使用 pnpm\npnpm add @nuxt\u002Fimage\n```\n\n### 2.2 基础配置\n```javascript\n\u002F\u002F nuxt.config.js\nexport default {\n  modules: [\n    '@nuxt\u002Fimage'\n  ],\n  \n  image: {\n    \u002F\u002F 基本配置\n    dir: 'assets\u002Fimages', \u002F\u002F 图像目录\n    quality: 80, \u002F\u002F 默认质量\n    formats: ['webp', 'avif', 'jpeg'], \u002F\u002F 支持格式\n    \n    \u002F\u002F 提供商配置\n    provider: 'ipx', \u002F\u002F 默认使用本地处理\n    screens: {\n      xs: 320,\n      sm: 640,\n      md: 768,\n      lg: 1024,\n      xl: 1280,\n      xxl: 1536\n    }\n  }\n}\n```\n\n### 2.3 多提供商配置\n```javascript\n\u002F\u002F nuxt.config.js\nexport default {\n  image: {\n    providers: {\n      \u002F\u002F 本地处理\n      ipx: {},\n      \n      \u002F\u002F Cloudinary 配置\n      cloudinary: {\n        baseURL: 'https:\u002F\u002Fres.cloudinary.com\u002Fyour-cloud-name\u002Fimage\u002Fupload\u002F'\n      },\n      \n      \u002F\u002F Imgix 配置\n      imgix: {\n        baseURL: 'https:\u002F\u002Fyour-domain.imgix.net\u002F'\n      },\n      \n      \u002F\u002F 静态资源\n      static: {}\n    },\n    \n    \u002F\u002F 设置默认提供商\n    provider: 'ipx'\n  }\n}\n```\n\n## 3. 核心组件使用\n\n### 3.1 nuxt-img 组件\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- 基本用法 -->\n    \u003Cnuxt-img\n      src=\"\u002Fimages\u002Fhero.jpg\"\n      alt=\"Hero Image\"\n      width=\"800\"\n      height=\"400\"\n    \u002F>\n    \n    \u003C!-- 响应式尺寸 -->\n    \u003Cnuxt-img\n      src=\"\u002Fimages\u002Fproduct.jpg\"\n      :sizes=\"'sm:100vw md:50vw lg:400px'\"\n      alt=\"Responsive Product\"\n    \u002F>\n    \n    \u003C!-- 质量与格式控制 -->\n    \u003Cnuxt-img\n      src=\"\u002Fimages\u002Fphoto.jpg\"\n      :modifiers=\"{ quality: 90, format: 'webp' }\"\n      alt=\"Optimized Image\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n### 3.2 nuxt-picture 组件\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- 多格式支持 -->\n    \u003Cnuxt-picture\n      src=\"\u002Fimages\u002Fartwork.jpg\"\n      alt=\"Artwork with multiple formats\"\n      :img-attrs=\"{ class: 'artwork-image' }\"\n      sizes=\"sm:100vw md:50vw lg:33vw\"\n      :modifiers=\"{\n        quality: 85,\n        format: 'webp'\n      }\"\n    \u002F>\n    \n    \u003C!-- 艺术指导（Art Direction） -->\n    \u003Cnuxt-picture>\n      \u003Csource\n        srcset=\"\u002Fimages\u002Fhero-mobile.jpg\"\n        media=\"(max-width: 768px)\"\n        sizes=\"100vw\"\n      \u002F>\n      \u003Csource\n        srcset=\"\u002Fimages\u002Fhero-desktop.jpg\"\n        media=\"(min-width: 769px)\"\n        sizes=\"100vw\"\n      \u002F>\n      \u003Cimg\n        src=\"\u002Fimages\u002Fhero-desktop.jpg\"\n        alt=\"Responsive Hero\"\n        class=\"hero-img\"\n      \u002F>\n    \u003C\u002Fnuxt-picture>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## 4. 高级功能与优化技巧\n\n### 4.1 懒加载与占位符\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- 懒加载 -->\n    \u003Cnuxt-img\n      src=\"\u002Fimages\u002Flarge-banner.jpg\"\n      loading=\"lazy\"\n      placeholder\n      alt=\"Lazy loaded image\"\n    \u002F>\n    \n    \u003C!-- 自定义占位符 -->\n    \u003Cnuxt-img\n      src=\"\u002Fimages\u002Fproduct-gallery.jpg\"\n      :placeholder=\"[50, 25, 10]\"\n      alt=\"Image with blur placeholder\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n.blur-up {\n  filter: blur(5px);\n  transition: filter 0.3s;\n}\n\n.blur-up.lazy-loaded {\n  filter: blur(0);\n}\n\u003C\u002Fstyle>\n```\n\n### 4.2 性能优化配置\n```javascript\n\u002F\u002F nuxt.config.js\nexport default {\n  image: {\n    \u002F\u002F 性能优化配置\n    presets: {\n      avatar: {\n        modifiers: {\n          width: 50,\n          height: 50,\n          fit: 'cover'\n        }\n      },\n      cover: {\n        modifiers: {\n          width: 800,\n          height: 400,\n          fit: 'cover'\n        }\n      }\n    },\n    \n    \u002F\u002F 预加载关键图像\n    preload: ['\u002Fimages\u002Fabove-the-fold.jpg']\n  }\n}\n```\n\n### 4.3 在组件中使用预设\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003C!-- 使用预设 -->\n    \u003Cnuxt-img\n      src=\"\u002Fimages\u002Fuser-avatar.jpg\"\n      preset=\"avatar\"\n      alt=\"User Avatar\"\n    \u002F>\n    \n    \u003C!-- 覆盖预设选项 -->\n    \u003Cnuxt-img\n      src=\"\u002Fimages\u002Fblog-cover.jpg\"\n      preset=\"cover\"\n      :modifiers=\"{ ...$preset.cover, quality: 95 }\"\n      alt=\"Blog Cover\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n```\n\n## 5. 实际应用案例\n\n### 5.1 电商产品图库\n```vue\n\u003Ctemplate>\n  \u003Cdiv class=\"product-gallery\">\n    \u003C!-- 主图 -->\n    \u003Cnuxt-img\n      :src=\"mainImage\"\n      :alt=\"product.name\"\n      sizes=\"sm:100vw md:60vw lg:50vw\"\n      class=\"main-image\"\n      @click=\"openLightbox\"\n    \u002F>\n    \n    \u003C!-- 缩略图列表 -->\n    \u003Cdiv class=\"thumbnails\">\n      \u003Cnuxt-img\n        v-for=\"(thumb, index) in product.thumbnails\"\n        :key=\"index\"\n        :src=\"thumb\"\n        :alt=\"`${product.name} - View ${index + 1}`\"\n        width=\"100\"\n        height=\"100\"\n        @click=\"selectImage(index)\"\n        class=\"thumbnail\"\n      \u002F>\n    \u003C\u002Fdiv>\n    \n    \u003C!-- 图片查看器 -->\n    \u003Cdiv v-if=\"showLightbox\" class=\"lightbox\">\n      \u003Cnuxt-img\n        :src=\"lightboxImage\"\n        :alt=\"product.name\"\n        sizes=\"90vw\"\n        class=\"lightbox-image\"\n      \u002F>\n    \u003C\u002Fdiv>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      product: {\n        name: 'Premium Headphones',\n        images: [\n          '\u002Fproducts\u002Fheadphones-1.jpg',\n          '\u002Fproducts\u002Fheadphones-2.jpg',\n          '\u002Fproducts\u002Fheadphones-3.jpg'\n        ],\n        thumbnails: [\n          '\u002Fproducts\u002Fheadphones-thumb-1.jpg',\n          '\u002Fproducts\u002Fheadphones-thumb-2.jpg',\n          '\u002Fproducts\u002Fheadphones-thumb-3.jpg'\n        ]\n      },\n      mainImage: '\u002Fproducts\u002Fheadphones-1.jpg',\n      showLightbox: false,\n      lightboxImage: ''\n    }\n  },\n  methods: {\n    selectImage(index) {\n      this.mainImage = this.product.images[index]\n    },\n    openLightbox() {\n      this.lightboxImage = this.mainImage\n      this.showLightbox = true\n    }\n  }\n}\n\u003C\u002Fscript>\n```\n\n### 5.2 博客文章图片优化\n```vue\n\u003Ctemplate>\n  \u003Carticle class=\"blog-post\">\n    \u003Cheader>\n      \u003Cnuxt-img\n        :src=\"article.coverImage\"\n        :alt=\"article.title\"\n        sizes=\"100vw\"\n        class=\"cover-image\"\n      \u002F>\n    \u003C\u002Fheader>\n    \n    \u003Cdiv class=\"content\">\n      \u003Ch1>{{ article.title }}\u003C\u002Fh1>\n      \n      \u003C!-- 内容中的图片 -->\n      \u003Cdiv v-html=\"article.content\">\u003C\u002Fdiv>\n      \n      \u003C!-- 图库部分 -->\n      \u003Cdiv class=\"image-gallery\">\n        \u003Cnuxt-img\n          v-for=\"(image, index) in article.gallery\"\n          :key=\"index\"\n          :src=\"image.src\"\n          :alt=\"image.alt\"\n          sizes=\"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw\"\n          class=\"gallery-image\"\n          loading=\"lazy\"\n        \u002F>\n      \u003C\u002Fdiv>\n    \u003C\u002Fdiv>\n  \u003C\u002Farticle>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  async asyncData({ $content, params }) {\n    const article = await $content('articles', params.slug).fetch()\n    return { article }\n  }\n}\n\u003C\u002Fscript>\n```\n\n## 6. 服务端渲染与 API 使用\n\n### 6.1 服务端图像处理\n```javascript\n\u002F\u002F 在 API 路由或中间件中使用\nexport default defineEventHandler(async (event) => {\n  const { getImage } = useImage()\n  \n  \u002F\u002F 获取优化后的图像 URL\n  const optimizedUrl = getImage('\u002Fimages\u002Foriginal.jpg', {\n    width: 800,\n    quality: 85,\n    format: 'webp'\n  })\n  \n  return { image: optimizedUrl }\n})\n```\n\n### 6.2 自定义图像转换\n```javascript\n\u002F\u002F composables\u002FuseImageOptimizer.js\nexport const useImageOptimizer = () => {\n  const { $img } = useNuxtApp()\n  \n  const optimizeImage = (src, options = {}) => {\n    const defaultOptions = {\n      width: 1200,\n      quality: 80,\n      format: 'webp'\n    }\n    \n    return $img(src, { ...defaultOptions, ...options })\n  }\n  \n  return { optimizeImage }\n}\n```\n\n## 7. 最佳实践与性能监控\n\n### 7.1 性能监控配置\n```javascript\n\u002F\u002F nuxt.config.js\nexport default {\n  image: {\n    \u002F\u002F 性能监控\n    onError: (error, { src, input }) => {\n      console.error('Image loading error:', error)\n      \u002F\u002F 发送错误日志到监控服务\n    },\n    \n    \u002F\u002F 性能预算\n    performance: {\n      maxWidth: 1920,\n      maxHeight: 1080\n    }\n  }\n}\n```\n\n### 7.2 错误处理与降级方案\n```vue\n\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cnuxt-img\n      :src=\"imageSrc\"\n      :alt=\"imageAlt\"\n      @error=\"handleImageError\"\n      class=\"content-image\"\n    \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript>\nexport default {\n  data() {\n    return {\n      imageSrc: '\u002Fimages\u002Fprimary.jpg',\n      fallbackImage: '\u002Fimages\u002Ffallback.jpg'\n    }\n  },\n  methods: {\n    handleImageError(event) {\n      console.warn('Image failed to load, using fallback')\n      event.target.src = this.fallbackImage\n    }\n  }\n}\n\u003C\u002Fscript>\n```\n\n## 8. 总结\n\n@nuxt\u002Fimage 模块为 Nuxt.js 应用提供了完整的图像优化解决方案。通过合理配置和使用，可以显著提升网站性能、用户体验和 SEO 表现。关键要点包括：\n\n- **选择合适的提供商**：根据项目需求选择本地处理或 CDN 服务\n- **合理设置尺寸**：根据断点配置合适的图像尺寸\n- **利用懒加载**：对非关键图像启用懒加载\n- **监控性能**：设置图像性能预算和错误处理\n- **保持更新**：关注模块更新，利用新特性持续优化\n\n此培训材料涵盖了 @nuxt\u002Fimage 的核心概念和实际应用，建议在实际项目中逐步实践这些技术点。","\u003Ch2 data-line=\"0\" id=\"1. 模块概述\">1. 模块概述\u003C\u002Fh2>\n\u003Ch3 data-line=\"2\" id=\"1.1 什么是 @nuxt\u002Fimage？\">1.1 什么是 @nuxt\u002Fimage？\u003C\u002Fh3>\n\u003Cp data-line=\"3\">@nuxt\u002Fimage 是 Nuxt.js 官方推出的图像优化模块，提供了自动化的图像处理、优化和响应式解决方案。它支持多种图像提供商（如 Cloudinary、Imgix 等），并内置了本地图像处理功能。\u003C\u002Fp>\n\u003Ch3 data-line=\"5\" id=\"1.2 核心特性\">1.2 核心特性\u003C\u002Fh3>\n\u003Cul data-line=\"6\">\n\u003Cli data-line=\"6\">\u003Cstrong>自动优化\u003C\u002Fstrong>：压缩、格式转换（WebP\u002FAVIF）\u003C\u002Fli>\n\u003Cli data-line=\"7\">\u003Cstrong>响应式图像\u003C\u002Fstrong>：自动生成多尺寸版本\u003C\u002Fli>\n\u003Cli data-line=\"8\">\u003Cstrong>懒加载\u003C\u002Fstrong>：提升页面加载性能\u003C\u002Fli>\n\u003Cli data-line=\"9\">\u003Cstrong>CDN 集成\u003C\u002Fstrong>：支持主流图像 CDN 服务\u003C\u002Fli>\n\u003Cli data-line=\"10\">\u003Cstrong>开发友好\u003C\u002Fstrong>：热重载、TypeScript 支持\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 data-line=\"12\" id=\"2. 安装与配置\">2. 安装与配置\u003C\u002Fh2>\n\u003Ch3 data-line=\"14\" id=\"2.1 安装\">2.1 安装\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"15\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">bash\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-bash\" language=bash>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\"># 使用 npm\u003C\u002Fspan>\nnpm install @nuxt\u002Fimage\n\n\u003Cspan class=\"hljs-comment\"># 使用 yarn\u003C\u002Fspan>\nyarn add @nuxt\u002Fimage\n\n\u003Cspan class=\"hljs-comment\"># 使用 pnpm\u003C\u002Fspan>\npnpm add @nuxt\u002Fimage\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"26\" id=\"2.2 基础配置\">2.2 基础配置\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"27\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">javascript\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-javascript\" language=javascript>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\">\u002F\u002F nuxt.config.js\u003C\u002Fspan>\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">default\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-attr\">modules\u003C\u002Fspan>: [\n    \u003Cspan class=\"hljs-string\">'@nuxt\u002Fimage'\u003C\u002Fspan>\n  ],\n  \n  \u003Cspan class=\"hljs-attr\">image\u003C\u002Fspan>: {\n    \u003Cspan class=\"hljs-comment\">\u002F\u002F 基本配置\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">dir\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'assets\u002Fimages'\u003C\u002Fspan>, \u003Cspan class=\"hljs-comment\">\u002F\u002F 图像目录\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">quality\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">80\u003C\u002Fspan>, \u003Cspan class=\"hljs-comment\">\u002F\u002F 默认质量\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">formats\u003C\u002Fspan>: [\u003Cspan class=\"hljs-string\">'webp'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'avif'\u003C\u002Fspan>, \u003Cspan class=\"hljs-string\">'jpeg'\u003C\u002Fspan>], \u003Cspan class=\"hljs-comment\">\u002F\u002F 支持格式\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-comment\">\u002F\u002F 提供商配置\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">provider\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'ipx'\u003C\u002Fspan>, \u003Cspan class=\"hljs-comment\">\u002F\u002F 默认使用本地处理\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">screens\u003C\u002Fspan>: {\n      \u003Cspan class=\"hljs-attr\">xs\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">320\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">sm\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">640\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">md\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">768\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">lg\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">1024\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">xl\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">1280\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">xxl\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">1536\u003C\u002Fspan>\n    }\n  }\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"54\" id=\"2.3 多提供商配置\">2.3 多提供商配置\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"55\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">javascript\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-javascript\" language=javascript>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\">\u002F\u002F nuxt.config.js\u003C\u002Fspan>\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">default\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-attr\">image\u003C\u002Fspan>: {\n    \u003Cspan class=\"hljs-attr\">providers\u003C\u002Fspan>: {\n      \u003Cspan class=\"hljs-comment\">\u002F\u002F 本地处理\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">ipx\u003C\u002Fspan>: {},\n      \n      \u003Cspan class=\"hljs-comment\">\u002F\u002F Cloudinary 配置\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">cloudinary\u003C\u002Fspan>: {\n        \u003Cspan class=\"hljs-attr\">baseURL\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'https:\u002F\u002Fres.cloudinary.com\u002Fyour-cloud-name\u002Fimage\u002Fupload\u002F'\u003C\u002Fspan>\n      },\n      \n      \u003Cspan class=\"hljs-comment\">\u002F\u002F Imgix 配置\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">imgix\u003C\u002Fspan>: {\n        \u003Cspan class=\"hljs-attr\">baseURL\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'https:\u002F\u002Fyour-domain.imgix.net\u002F'\u003C\u002Fspan>\n      },\n      \n      \u003Cspan class=\"hljs-comment\">\u002F\u002F 静态资源\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">static\u003C\u002Fspan>: {}\n    },\n    \n    \u003Cspan class=\"hljs-comment\">\u002F\u002F 设置默认提供商\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">provider\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'ipx'\u003C\u002Fspan>\n  }\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch2 data-line=\"83\" id=\"3. 核心组件使用\">3. 核心组件使用\u003C\u002Fh2>\n\u003Ch3 data-line=\"85\" id=\"3.1 nuxt-img 组件\">3.1 nuxt-img 组件\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"86\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">vue\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-vue\" language=vue>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-comment\"><!-- 基本用法 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fhero.jpg"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Hero Image"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">width\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"800"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">height\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"400"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- 响应式尺寸 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fproduct.jpg"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:sizes\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"'sm:100vw md:50vw lg:400px'"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Responsive Product"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- 质量与格式控制 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fphoto.jpg"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:modifiers\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"{ quality: 90, format: 'webp' }"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Optimized Image"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"114\" id=\"3.2 nuxt-picture 组件\">3.2 nuxt-picture 组件\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"115\" class=\"md-editor-code\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">vue\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-vue\" language=vue>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-comment\"><!-- 多格式支持 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-picture\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fartwork.jpg"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Artwork with multiple formats"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:img-attrs\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"{ class: 'artwork-image' }"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">sizes\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"sm:100vw md:50vw lg:33vw"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:modifiers\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"{\n        quality: 85,\n        format: 'webp'\n      }"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- 艺术指导（Art Direction） -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-picture\u003C\u002Fspan>>\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">source\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">srcset\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fhero-mobile.jpg"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">media\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"(max-width: 768px)"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">sizes\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"100vw"\u003C\u002Fspan>\n      \u002F>\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">source\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">srcset\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fhero-desktop.jpg"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">media\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"(min-width: 769px)"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">sizes\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"100vw"\u003C\u002Fspan>\n      \u002F>\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">img\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fhero-desktop.jpg"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Responsive Hero"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"hero-img"\u003C\u002Fspan>\n      \u002F>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">nuxt-picture\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch2 data-line=\"152\" id=\"4. 高级功能与优化技巧\">4. 高级功能与优化技巧\u003C\u002Fh2>\n\u003Ch3 data-line=\"154\" id=\"4.1 懒加载与占位符\">4.1 懒加载与占位符\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"155\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">vue\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-vue\" language=vue>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-comment\"><!-- 懒加载 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Flarge-banner.jpg"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">loading\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"lazy"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">placeholder\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Lazy loaded image"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- 自定义占位符 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fproduct-gallery.jpg"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:placeholder\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"[50, 25, 10]"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Image with blur placeholder"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">style\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"language-css\">\n\u003Cspan class=\"hljs-selector-class\">.blur-up\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-attribute\">filter\u003C\u002Fspan>: \u003Cspan class=\"hljs-built_in\">blur\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">5px\u003C\u002Fspan>);\n  \u003Cspan class=\"hljs-attribute\">transition\u003C\u002Fspan>: filter \u003Cspan class=\"hljs-number\">0.3s\u003C\u002Fspan>;\n}\n\n\u003Cspan class=\"hljs-selector-class\">.blur-up\u003C\u002Fspan>\u003Cspan class=\"hljs-selector-class\">.lazy-loaded\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-attribute\">filter\u003C\u002Fspan>: \u003Cspan class=\"hljs-built_in\">blur\u003C\u002Fspan>(\u003Cspan class=\"hljs-number\">0\u003C\u002Fspan>);\n}\n\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">style\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"187\" id=\"4.2 性能优化配置\">4.2 性能优化配置\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"188\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">javascript\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-javascript\" language=javascript>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\">\u002F\u002F nuxt.config.js\u003C\u002Fspan>\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">default\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-attr\">image\u003C\u002Fspan>: {\n    \u003Cspan class=\"hljs-comment\">\u002F\u002F 性能优化配置\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">presets\u003C\u002Fspan>: {\n      \u003Cspan class=\"hljs-attr\">avatar\u003C\u002Fspan>: {\n        \u003Cspan class=\"hljs-attr\">modifiers\u003C\u002Fspan>: {\n          \u003Cspan class=\"hljs-attr\">width\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">50\u003C\u002Fspan>,\n          \u003Cspan class=\"hljs-attr\">height\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">50\u003C\u002Fspan>,\n          \u003Cspan class=\"hljs-attr\">fit\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'cover'\u003C\u002Fspan>\n        }\n      },\n      \u003Cspan class=\"hljs-attr\">cover\u003C\u002Fspan>: {\n        \u003Cspan class=\"hljs-attr\">modifiers\u003C\u002Fspan>: {\n          \u003Cspan class=\"hljs-attr\">width\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">800\u003C\u002Fspan>,\n          \u003Cspan class=\"hljs-attr\">height\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">400\u003C\u002Fspan>,\n          \u003Cspan class=\"hljs-attr\">fit\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'cover'\u003C\u002Fspan>\n        }\n      }\n    },\n    \n    \u003Cspan class=\"hljs-comment\">\u002F\u002F 预加载关键图像\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">preload\u003C\u002Fspan>: [\u003Cspan class=\"hljs-string\">'\u002Fimages\u002Fabove-the-fold.jpg'\u003C\u002Fspan>]\n  }\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"216\" id=\"4.3 在组件中使用预设\">4.3 在组件中使用预设\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"217\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">vue\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-vue\" language=vue>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-comment\"><!-- 使用预设 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fuser-avatar.jpg"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">preset\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"avatar"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"User Avatar"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- 覆盖预设选项 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"\u002Fimages\u002Fblog-cover.jpg"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">preset\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"cover"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:modifiers\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"{ ...$preset.cover, quality: 95 }"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"Blog Cover"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch2 data-line=\"238\" id=\"5. 实际应用案例\">5. 实际应用案例\u003C\u002Fh2>\n\u003Ch3 data-line=\"240\" id=\"5.1 电商产品图库\">5.1 电商产品图库\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"241\" class=\"md-editor-code\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">vue\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-vue\" language=vue>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"product-gallery"\u003C\u002Fspan>>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-comment\"><!-- 主图 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"mainImage"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"product.name"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">sizes\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"sm:100vw md:60vw lg:50vw"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"main-image"\u003C\u002Fspan>\n      @\u003Cspan class=\"hljs-attr\">click\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"openLightbox"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- 缩略图列表 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"thumbnails"\u003C\u002Fspan>>\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">v-for\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"(thumb, index) in product.thumbnails"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">:key\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"index"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">:src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"thumb"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">:alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"`${product.name} - View ${index + 1}`"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">width\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"100"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">height\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"100"\u003C\u002Fspan>\n        @\u003Cspan class=\"hljs-attr\">click\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"selectImage(index)"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"thumbnail"\u003C\u002Fspan>\n      \u002F>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-comment\"><!-- 图片查看器 -->\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">v-if\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"showLightbox"\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"lightbox"\u003C\u002Fspan>>\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">:src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"lightboxImage"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">:alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"product.name"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">sizes\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"90vw"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"lightbox-image"\u003C\u002Fspan>\n      \u002F>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">default\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-title function_\">data\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C\u002Fspan> {\n      \u003Cspan class=\"hljs-attr\">product\u003C\u002Fspan>: {\n        \u003Cspan class=\"hljs-attr\">name\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'Premium Headphones'\u003C\u002Fspan>,\n        \u003Cspan class=\"hljs-attr\">images\u003C\u002Fspan>: [\n          \u003Cspan class=\"hljs-string\">'\u002Fproducts\u002Fheadphones-1.jpg'\u003C\u002Fspan>,\n          \u003Cspan class=\"hljs-string\">'\u002Fproducts\u002Fheadphones-2.jpg'\u003C\u002Fspan>,\n          \u003Cspan class=\"hljs-string\">'\u002Fproducts\u002Fheadphones-3.jpg'\u003C\u002Fspan>\n        ],\n        \u003Cspan class=\"hljs-attr\">thumbnails\u003C\u002Fspan>: [\n          \u003Cspan class=\"hljs-string\">'\u002Fproducts\u002Fheadphones-thumb-1.jpg'\u003C\u002Fspan>,\n          \u003Cspan class=\"hljs-string\">'\u002Fproducts\u002Fheadphones-thumb-2.jpg'\u003C\u002Fspan>,\n          \u003Cspan class=\"hljs-string\">'\u002Fproducts\u002Fheadphones-thumb-3.jpg'\u003C\u002Fspan>\n        ]\n      },\n      \u003Cspan class=\"hljs-attr\">mainImage\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'\u002Fproducts\u002Fheadphones-1.jpg'\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">showLightbox\u003C\u002Fspan>: \u003Cspan class=\"hljs-literal\">false\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">lightboxImage\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">''\u003C\u002Fspan>\n    }\n  },\n  \u003Cspan class=\"hljs-attr\">methods\u003C\u002Fspan>: {\n    \u003Cspan class=\"hljs-title function_\">selectImage\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">index\u003C\u002Fspan>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">mainImage\u003C\u002Fspan> = \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">product\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">images\u003C\u002Fspan>[index]\n    },\n    \u003Cspan class=\"hljs-title function_\">openLightbox\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n      \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">lightboxImage\u003C\u002Fspan> = \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">mainImage\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">showLightbox\u003C\u002Fspan> = \u003Cspan class=\"hljs-literal\">true\u003C\u002Fspan>\n    }\n  }\n}\n\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"314\" id=\"5.2 博客文章图片优化\">5.2 博客文章图片优化\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"315\" class=\"md-editor-code\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">vue\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-vue\" language=vue>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">article\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"blog-post"\u003C\u002Fspan>>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">header\u003C\u002Fspan>>\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">:src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"article.coverImage"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">:alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"article.title"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">sizes\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"100vw"\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"cover-image"\u003C\u002Fspan>\n      \u002F>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">header\u003C\u002Fspan>>\u003C\u002Fspan>\n    \n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"content"\u003C\u002Fspan>>\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">h1\u003C\u002Fspan>>\u003C\u002Fspan>{{ article.title }}\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">h1\u003C\u002Fspan>>\u003C\u002Fspan>\n      \n      \u003Cspan class=\"hljs-comment\"><!-- 内容中的图片 -->\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">v-html\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"article.content"\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n      \n      \u003Cspan class=\"hljs-comment\"><!-- 图库部分 -->\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan> \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"image-gallery"\u003C\u002Fspan>>\u003C\u002Fspan>\n        \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n          \u003Cspan class=\"hljs-attr\">v-for\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"(image, index) in article.gallery"\u003C\u002Fspan>\n          \u003Cspan class=\"hljs-attr\">:key\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"index"\u003C\u002Fspan>\n          \u003Cspan class=\"hljs-attr\">:src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"image.src"\u003C\u002Fspan>\n          \u003Cspan class=\"hljs-attr\">:alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"image.alt"\u003C\u002Fspan>\n          \u003Cspan class=\"hljs-attr\">sizes\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"\u003C\u002Fspan>\n          \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"gallery-image"\u003C\u002Fspan>\n          \u003Cspan class=\"hljs-attr\">loading\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"lazy"\u003C\u002Fspan>\n        \u002F>\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">article\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">default\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-keyword\">async\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">asyncData\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">{ $content, params }\u003C\u002Fspan>) {\n    \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> article = \u003Cspan class=\"hljs-keyword\">await\u003C\u002Fspan> $content(\u003Cspan class=\"hljs-string\">'articles'\u003C\u002Fspan>, params.\u003Cspan class=\"hljs-property\">slug\u003C\u002Fspan>).\u003Cspan class=\"hljs-title function_\">fetch\u003C\u002Fspan>()\n    \u003Cspan class=\"hljs-keyword\">return\u003C\u002Fspan> { article }\n  }\n}\n\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch2 data-line=\"359\" id=\"6. 服务端渲染与 API 使用\">6. 服务端渲染与 API 使用\u003C\u002Fh2>\n\u003Ch3 data-line=\"361\" id=\"6.1 服务端图像处理\">6.1 服务端图像处理\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"362\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">javascript\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-javascript\" language=javascript>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\">\u002F\u002F 在 API 路由或中间件中使用\u003C\u002Fspan>\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">default\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">defineEventHandler\u003C\u002Fspan>(\u003Cspan class=\"hljs-title function_\">async\u003C\u002Fspan> (event) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> { getImage } = \u003Cspan class=\"hljs-title function_\">useImage\u003C\u002Fspan>()\n  \n  \u003Cspan class=\"hljs-comment\">\u002F\u002F 获取优化后的图像 URL\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> optimizedUrl = \u003Cspan class=\"hljs-title function_\">getImage\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'\u002Fimages\u002Foriginal.jpg'\u003C\u002Fspan>, {\n    \u003Cspan class=\"hljs-attr\">width\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">800\u003C\u002Fspan>,\n    \u003Cspan class=\"hljs-attr\">quality\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">85\u003C\u002Fspan>,\n    \u003Cspan class=\"hljs-attr\">format\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'webp'\u003C\u002Fspan>\n  })\n  \n  \u003Cspan class=\"hljs-keyword\">return\u003C\u002Fspan> { \u003Cspan class=\"hljs-attr\">image\u003C\u002Fspan>: optimizedUrl }\n})\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"378\" id=\"6.2 自定义图像转换\">6.2 自定义图像转换\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"379\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">javascript\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-javascript\" language=javascript>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\">\u002F\u002F composables\u002FuseImageOptimizer.js\u003C\u002Fspan>\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">useImageOptimizer\u003C\u002Fspan> = (\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) => {\n  \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> { $img } = \u003Cspan class=\"hljs-title function_\">useNuxtApp\u003C\u002Fspan>()\n  \n  \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> \u003Cspan class=\"hljs-title function_\">optimizeImage\u003C\u002Fspan> = (\u003Cspan class=\"hljs-params\">src, options = {}\u003C\u002Fspan>) => {\n    \u003Cspan class=\"hljs-keyword\">const\u003C\u002Fspan> defaultOptions = {\n      \u003Cspan class=\"hljs-attr\">width\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">1200\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">quality\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">80\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">format\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'webp'\u003C\u002Fspan>\n    }\n    \n    \u003Cspan class=\"hljs-keyword\">return\u003C\u002Fspan> $img(src, { ...defaultOptions, ...options })\n  }\n  \n  \u003Cspan class=\"hljs-keyword\">return\u003C\u002Fspan> { optimizeImage }\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch2 data-line=\"398\" id=\"7. 最佳实践与性能监控\">7. 最佳实践与性能监控\u003C\u002Fh2>\n\u003Ch3 data-line=\"400\" id=\"7.1 性能监控配置\">7.1 性能监控配置\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"401\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">javascript\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-javascript\" language=javascript>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"hljs-comment\">\u002F\u002F nuxt.config.js\u003C\u002Fspan>\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">default\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-attr\">image\u003C\u002Fspan>: {\n    \u003Cspan class=\"hljs-comment\">\u002F\u002F 性能监控\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">onError\u003C\u002Fspan>: \u003Cspan class=\"hljs-function\">(\u003Cspan class=\"hljs-params\">error, { src, input }\u003C\u002Fspan>) =>\u003C\u002Fspan> {\n      \u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">error\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'Image loading error:'\u003C\u002Fspan>, error)\n      \u003Cspan class=\"hljs-comment\">\u002F\u002F 发送错误日志到监控服务\u003C\u002Fspan>\n    },\n    \n    \u003Cspan class=\"hljs-comment\">\u002F\u002F 性能预算\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-attr\">performance\u003C\u002Fspan>: {\n      \u003Cspan class=\"hljs-attr\">maxWidth\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">1920\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">maxHeight\u003C\u002Fspan>: \u003Cspan class=\"hljs-number\">1080\u003C\u002Fspan>\n    }\n  }\n}\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch3 data-line=\"420\" id=\"7.2 错误处理与降级方案\">7.2 错误处理与降级方案\u003C\u002Fh3>\n\n        \u003Cdetails  data-line=\"421\" class=\"md-editor-code\" open=\"\">\n          \u003Csummary class=\"md-editor-code-head\">\n            \u003Cdiv class=\"md-editor-code-flag\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\n            \u003Cdiv class=\"md-editor-code-action\">\n              \u003Cspan class=\"md-editor-code-lang\">vue\u003C\u002Fspan>\n              \u003Cspan class=\"md-editor-copy-button\" data-tips=\"复制代码\">复制代码\u003C\u002Fspan>\n              \n              \u003Cspan class=\"md-editor-collapse-tips\">\u003Csvg xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" class=\"lucide lucide-circle-chevron-left md-editor-icon\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"10\"\u002F>\u003Cpath d=\"m14 16-4-4 4-4\"\u002F>\u003C\u002Fsvg>\u003C\u002Fspan>\n            \u003C\u002Fdiv>\n          \u003C\u002Fsummary>\n          \u003Cpre>\u003Ccode class=\"language-vue\" language=vue>\u003Cspan class=\"md-editor-code-block\">\u003Cspan class=\"language-xml\">\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n    \u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">nuxt-img\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:src\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"imageSrc"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">:alt\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"imageAlt"\u003C\u002Fspan>\n      @\u003Cspan class=\"hljs-attr\">error\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"handleImageError"\u003C\u002Fspan>\n      \u003Cspan class=\"hljs-attr\">class\u003C\u002Fspan>=\u003Cspan class=\"hljs-string\">"content-image"\u003C\u002Fspan>\n    \u002F>\u003C\u002Fspan>\n  \u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">div\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">template\u003C\u002Fspan>>\u003C\u002Fspan>\n\n\u003Cspan class=\"hljs-tag\"><\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\u003Cspan class=\"language-javascript\">\n\u003Cspan class=\"hljs-keyword\">export\u003C\u002Fspan> \u003Cspan class=\"hljs-keyword\">default\u003C\u002Fspan> {\n  \u003Cspan class=\"hljs-title function_\">data\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">\u003C\u002Fspan>) {\n    \u003Cspan class=\"hljs-keyword\">return\u003C\u002Fspan> {\n      \u003Cspan class=\"hljs-attr\">imageSrc\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'\u002Fimages\u002Fprimary.jpg'\u003C\u002Fspan>,\n      \u003Cspan class=\"hljs-attr\">fallbackImage\u003C\u002Fspan>: \u003Cspan class=\"hljs-string\">'\u002Fimages\u002Ffallback.jpg'\u003C\u002Fspan>\n    }\n  },\n  \u003Cspan class=\"hljs-attr\">methods\u003C\u002Fspan>: {\n    \u003Cspan class=\"hljs-title function_\">handleImageError\u003C\u002Fspan>(\u003Cspan class=\"hljs-params\">event\u003C\u002Fspan>) {\n      \u003Cspan class=\"hljs-variable language_\">console\u003C\u002Fspan>.\u003Cspan class=\"hljs-title function_\">warn\u003C\u002Fspan>(\u003Cspan class=\"hljs-string\">'Image failed to load, using fallback'\u003C\u002Fspan>)\n      event.\u003Cspan class=\"hljs-property\">target\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">src\u003C\u002Fspan> = \u003Cspan class=\"hljs-variable language_\">this\u003C\u002Fspan>.\u003Cspan class=\"hljs-property\">fallbackImage\u003C\u002Fspan>\n    }\n  }\n}\n\u003C\u002Fspan>\u003Cspan class=\"hljs-tag\"><\u002F\u003Cspan class=\"hljs-name\">script\u003C\u002Fspan>>\u003C\u002Fspan>\n\u003C\u002Fspan>\u003C\u002Fspan>\u003Cspan rn-wrapper aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\n\n        \u003C\u002Fdetails>\n      \u003Ch2 data-line=\"451\" id=\"8. 总结\">8. 总结\u003C\u002Fh2>\n\u003Cp data-line=\"453\">@nuxt\u002Fimage 模块为 Nuxt.js 应用提供了完整的图像优化解决方案。通过合理配置和使用，可以显著提升网站性能、用户体验和 SEO 表现。关键要点包括：\u003C\u002Fp>\n\u003Cul data-line=\"455\">\n\u003Cli data-line=\"455\">\u003Cstrong>选择合适的提供商\u003C\u002Fstrong>：根据项目需求选择本地处理或 CDN 服务\u003C\u002Fli>\n\u003Cli data-line=\"456\">\u003Cstrong>合理设置尺寸\u003C\u002Fstrong>：根据断点配置合适的图像尺寸\u003C\u002Fli>\n\u003Cli data-line=\"457\">\u003Cstrong>利用懒加载\u003C\u002Fstrong>：对非关键图像启用懒加载\u003C\u002Fli>\n\u003Cli data-line=\"458\">\u003Cstrong>监控性能\u003C\u002Fstrong>：设置图像性能预算和错误处理\u003C\u002Fli>\n\u003Cli data-line=\"459\">\u003Cstrong>保持更新\u003C\u002Fstrong>：关注模块更新，利用新特性持续优化\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp data-line=\"461\">此培训材料涵盖了 @nuxt\u002Fimage 的核心概念和实际应用，建议在实际项目中逐步实践这些技术点。\u003C\u002Fp>\n",4970,16,"0","",2,0,9,"&lt,&quot,&#x,&gt,image","1. 模块概述\n1.1 什么是 @nuxt\u002Fimage？\n@nuxt\u002Fimage 是 Nuxt.js 官方推出的图像优化模块，提供了自动化的图像处理、优化和响应式解决方案。它支持多种图像提供商（如 Cloudinary、Imgix 等），并内置了本地图像处理功能。\n1.","2025-12-20 23:50:29"]