提供商

Uploadcare

一次性增强您的应用程序的文件上传、处理和交付功能。

Uploadcare 和 Nuxt Image 模块之间的集成。

使用

要使用来自 uploadcare 的图像,请将提供商指定为 uploadcare,并将图像 src 设置为仪表板中提供的 UUID。

page.vue
<NuxtImg
  provider="uploadcare"
  src="c160afba-8b42-45a9-a46a-d393248b0072"
  alt="My image from uploadcare"
/>

修饰符

要查看所有可能的修饰符及其选项,请查看 图像转换文档URL API 参考

为以下修饰符提供类型

src/types/module.ts
  // Image Compression
  format: 'jpeg' | 'png' | 'webp' | 'auto'
  quality: 'smart' | 'smart_retina' | 'normal' | 'better' | 'best' | 'lighter' | 'lightest'
  progressive: 'yes' | 'no'
  strip_meta: 'all' | 'none' | 'sensitive'

  // Image Geometry
  preview: `${number}x${number}` // Height x Width
  resize: `${number}x${number}` | `${number}x`| `x${number}` 
  smart_resize: `${number}x${number}`
  crop: string | string[]
  scale_crop: string | string[]
  border_radius: string | string[]
  setfill: string // 3, 6 or 8 digit hex color
  zoom_objects: string // 1 to 100

请随时打开 PR 来改进对更多操作的支持。

配置

默认情况下,所有文件 URL 使用 ucarecdn.com 域。通过设置自定义 CDN CNAME,文件 URL 可以使用 cdn.mycompany.com 代替。

请参阅 Uploadcare 文档,了解如何在您的项目中启用自定义域。要将自定义 CDN 名称告诉 Nuxt Image,请使用以下配置

nuxt.config.ts
export default defineNuxtConfig({
  image: {
    uploadcare: {
      cdnURL: 'cdn.mycompany.com',
    }
  }
})