ImageEngine

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

至少，您必须使用 imageengine 提供商进行配置，并将 baseURL 设置为您的 ImageEngine 传送地址

export default defineNuxtConfig({
  image: {
    imageengine: {
      baseURL: 'https://xxxxx.imgeng.in'
    }
  }
})

ImageEngine fit 值

有关 fit 属性的 标准值，映射到 ImageEngine 指令 如下所示

• cover: m_cropbox
• contain: m_letterbox
• fill: m_stretch
• inside: m_box，这是 ImageEngine 提供商的默认适应方法。
• outside: 此适应方法不受支持，其功能与 inside 相同。

ImageEngine 修饰符

除了 标准修饰符 外，您还可以使用所有 ImageEngine 指令，方法是将它们添加到 modifiers 属性中，并使用以下属性名称

• format: f 指令
• fit: m 指令
• passThrough: pass 指令
• sharpen: s 指令
• rotate: r 指令
• screenPercent: pc 指令
• crop: cr 指令
• inline: in 指令
• metadata: meta 指令

请注意，标准 quality 属性将转换为 ImageEngine cmpr 压缩指令。 quality 与压缩相反，因此 80% 的质量等于 20% 的压缩。由于 ImageEngine 会根据访问者的设备、浏览器和网络质量自动调整图片质量，因此建议您不要明确设置质量。如果您想完全禁用对图片的所有优化，您应该使用 :modifiers="{ passThrough: 'true' }"，这将提供未修改的图片。

示例 1：将图片裁剪到 100x80 的宽度和高度，从顶部开始 10 个像素，从左侧开始 20 个像素

<NuxtImg
  provider="imageengine"
  src="/some-image.jpg"
  width="100"
  height="80"
  :modifiers="{ cr: '100,80,10,20' }"
/>

示例 2：指示 ImageEngine 保留图片的 EXIF 元数据（通常会删除以减少图片字节大小）

<NuxtImg
  provider="imageengine"
  src="/some-image.jpg"
  width="100"
  height="80"
  :modifiers="{ meta: 'true' }"
/>

ImageEngine 最佳实践

自动格式和质量检测

ImageEngine 会根据请求图片的特定设备的特性，自动检测图片的最佳格式和质量。

此功能非常有效，建议您不要禁用它，但如果您必须禁用它，您可以手动指定格式（例如：format='webp'）和质量（quality='80'）。

ImageEngine 设置

ImageEngine 允许您在高级设置中设置 ImageEngine 控制面板中的所有修饰符/指令。这是一个设置默认调整的好地方，因为您可以修改它们，而无需更改您的 Nuxt 代码库。如果指令在 Nuxt 和 ImageEngine 用户可调整设置中都设置了，则 Nuxt 中的值优先级更高。