提供商

Cloudimage

来源
Nuxt Image 与 Cloudimage 完美集成。

Cloudimage 与图片模块的集成。

要使用此提供商，您需要指定 Cloudimage 的 token 和图片存储的 baseURL。

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      token: 'your_cloudimage_token',
      baseURL: 'origin_image_url' // or alias
    }
  }
})

选项

token

  • 类型: 字符串 (必需)

您的 Cloudimage 客户令牌。 注册 Cloudimage 帐户以获取一个。 注册只需不到一分钟，而且完全免费。

baseURL

  • 类型: 字符串 (必需)

您的原始图片 URL 或存储别名，允许缩短您的原始图片 URL。

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      token: 'demo',
      baseURL: 'sample.li'
    }
  }
})

这些格式也都适用

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      token: 'demo',
      baseURL: 'sample.li/images',
      baseURL: 'https://sample.li/images',
      baseURL: '_sl_' // alias defined in your Cloudimage storage settings
    }
  }
})

apiVersion

  • 类型: 字符串
  • 默认值: 空字符串

允许使用特定版本的 API。

对于在 20.10.2021 之前创建的令牌，apiVersion 需要设置为 v7。

这是一个官方的演示配置。 demo 是一个旧的令牌，因此 apiVersion 也需要定义。

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      token: 'demo',
      baseURL: 'sample.li',
      apiVersion: 'v7'
    }
  }
})

cdnURL

  • 类型: 字符串
  • 默认值: https://{token}.cloudimg.io/{apiVersion}

替换动态构建的 URL

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    cloudimage: {
      cdnURL: 'https://demo.cloudimg.io/v7',
    }
  }
})

Cloudimage 修饰符

除了 标准修饰符 之外，您还可以将 Cloudimage 特定的 Cloudimage 特定转换 参数传递给 modifiers 属性。

Cloudimage fit 值

除了 Nuxt 图片和 Nuxt 图片的 fit 属性的标准值 之外，Cloudimage 还提供了以下用于额外调整大小参数的值

  • crop - 将图片裁剪到指定的尺寸（宽度和高度），并保持比例。
  • face - 自动裁剪图片，保持最突出的面部。
  • fit - 将图片调整大小以适合指定的宽度和高度框，添加填充（图片或纯色）以保持比例。
  • cropfit - 根据原始图片和所需尺寸设置裁剪或调整大小模式。
  • bound - 调整大小到给定的宽度和高度框，并保持比例。类似于 fit，但不添加填充。
  • boundmin - 调整图片大小，同时将较小的尺寸绑定到所需的宽度或高度，并保持比例。

Cloudflare

Nuxt Image 与 Cloudflare 完美集成。

Cloudinary

Nuxt Image 与 Cloudinary 完美集成。