Imgix

Imgix 和图片模块之间的集成。

要使用此提供商，您只需要在 Imgix 中指定服务的基准 URL。

export default defineNuxtConfig({
  image: {
    imgix: {
      baseURL: 'https://assets.imgix.net'
    }
  }
})

imgix fit 值

除了 Nuxt 图片和 Nuxt 图片的 fit 属性的标准值 之外，Imgix 还提供了以下内容来实现额外的调整体验

• clamp - 将图片调整大小以适合宽度和高度尺寸，不会裁剪或扭曲图片，剩余的空间将填充来自图片边缘的扩展像素。生成的图片将与限制尺寸匹配。像素扩展称为仿射钳位，因此值名称为“钳位”。
• clip - Imgix 图片的默认调整设置。将图片调整大小以适合宽度和高度边界，不会裁剪或扭曲图片。生成的图片将与限制尺寸之一匹配，而另一个尺寸将更改以保持输入图片的相同纵横比。
• facearea - 查找包含所有面部或图片中特定面部的区域，并将其缩放到指定的宽度和高度尺寸。可以与 faceindex 一起使用以识别特定面部，以及与 facepad 一起使用以在面部周围包含额外的填充区域，以从面部周围的直接区域放大。
• fillMax - 将图片调整大小以适合请求的宽度和高度尺寸，同时保留原始纵横比，并且不丢弃任何原始图片数据。如果请求的宽度或高度超过原始尺寸，则原始图片将保持相同大小。多余的空间将填充纯色或图片的模糊版本。生成的图片完全匹配请求的尺寸。

imgix 修饰符

除了 标准修饰符 之外，您还可以将所有 Imgix 特定的渲染 API 参数传递给 modifiers 道具。

有关这些修饰符及其用途的完整列表，请查看 Imgix 的图片渲染 API 文档。

imgix 最佳实践

在使用 Imgix 时，一些常见的最佳实践是包含我们的 auto 参数，它将自动为图片应用最佳格式，并压缩图片。将此与一些智能裁剪和调整大小相结合，您将拥有出色的图片！

<NuxtImg
  provider="imgix"
  src="/blog/woman-hat.jpg"
  width="300"
  height="500"
  fit="cover"
  :modifiers="{ auto: 'format,compress', crop: 'faces' }"
/>

这将返回一张 300 x 500 的图片，该图片已被压缩，将显示面向下一代的浏览器格式，并且已通过智能方式裁剪到 戴帽子的女人的脸。

其他文档

您可以在一篇名为 使用新的 Nuxt 组件与 Imgix 的 Imgix 博客文章中找到其他文档和分步教程。