Cloudinary
Cloudinary 和图像模块之间的集成。
要使用此提供商，您只需在 cloudinary 中指定项目的基址 URL。
export default defineNuxtConfig({
image: {
cloudinary: {
baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/'
}
}
})
远程图像
查看 cloudinary 文档 以了解两者之间的区别。
获取
export default defineNuxtConfig({
image: {
cloudinary: {
baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/fetch/'
}
}
})
<NuxtImg provider="cloudinary" src="https://upload.wikimedia.org/wikipedia/commons/a/ae/Olympic_flag.jpg" width="300" height="200" />
注意：您需要配置您的“允许获取域”才能执行上述操作。
上传
export default defineNuxtConfig({
image: {
cloudinary: {
baseURL: 'https://res.cloudinary.com/<your-cloud-name>/image/upload/<mapping-folder>'
}
}
})
<NuxtImg provider="cloudinary" src="/commons/a/ae/Olympic_flag.jpg" width="300" height="200" />
注意：您需要配置您的“自动上传映射”才能执行上述操作。
Cloudinary fit 值
除了 Nuxt 图像和 Nuxt 图片的 fit 属性的标准值 之外，Cloudinary 还提供了以下内容以获得额外的调整体验
minCover- 与cover相同，但只有在原始图像小于给定的最小值（宽度和高度）时才会调整大小。minInside- 与inside模式相同，但只有在原始图像小于给定的最小值（宽度和高度）时才会调整大小。coverLimit- 与cover模式相同，但只有在原始图像大于给定的限制（宽度和高度）时才会调整大小。thumbnail- 使用人脸检测生成缩略图。cropping- 用于从原始图像中提取给定的宽度和高度。原始比例保持不变。
查看 Cloudinary 调整大小模式文档 以了解更多详细信息。
Cloudinary 修饰符
除了 标准修饰符 之外，您还可以将以下 Cloudinary 特定的转换参数传递给 modifiers 属性。
rotate
接受的值
- 任何度数，或者
auto_right|auto_left|ignore|vflip|hflip
以特定度数旋转或翻转给定的资产，或者根据方向自动旋转或翻转。
roundCorner
将所需图像的指定角圆角化。如果只传递一个数字或 max（所有角都会被应用）。其他用例的语法如下
- 使用 2 个值：
top_left_bottom_right_radius:top_right_bottom_left_radius（示例：20:40） - 使用 3 个值：
top_left:top_right_bottom_left:bottom_right（示例：20:30:40） - 使用 4 个值：
top_left:top_right:bottom_left:bottom_right（示例：20:0:40:40）
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main.png"
width="300"
height="169"
:modifiers="{ roundCorner: 'max' }"
/>
gravity
确定要裁剪的图像部分或放置叠加的位置。接受的值：auto，subject，face，sink，faceCenter，multipleFaces，multipleFacesCenter，north，northEast，northWest，west，southWest，south，southEast，east，center
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main.png"
width="300"
height="300"
fit="fill"
:modifiers="{ gravity: 'subject' }"
/>
effect
在所需的资产上应用过滤器或效果。有关语法的完整列表和可用的效果，请参阅 图像效果。
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main.png"
width="300"
height="300"
fit="fill"
:modifiers="{ effect: 'grayscale' }"
/>
color
在使用文本标题、阴影效果和着色效果时要使用的颜色。
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main.png"
width="300"
:modifiers="{ effect: 'colorize:50', color: 'red' }"
/>
flags
一个或多个标志，用于更改默认转换行为。有关更多信息，请参阅 图像标志。
dpr
资产的目标设备像素比。 auto 表示自动匹配用户设备中的 DPR 设置。
opacity
调整所需图像的不透明度。比例：0 到 100（%）。
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main.png"
width="300"
:modifiers="{ opacity: 50 }"
/>
overlay
在基本图像上方创建一个图层。这可以使用 x，y，gravity 来自定义叠加的位置。
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main.png"
width="100"
height="100"
fit="thumb"
:modifiers="modifiers"
/>
<script>
export default {
data() {
return {
modifiers: {
gravity: 'north',
overlay: 'text:default_style:Hello+World',
}
}
}
}
</script>
有关更多信息，请参阅 叠加文档。
underlay
在部分透明图像下方创建一个图层。这可以使用 x，y，gravity 来自定义叠加的位置。
transformation
要应用于资产的预定义命名转换。
zoom
与 fit='crop' 或 fit='thumb' 一起使用，以决定使用人脸检测保留人脸周围原始图像/视频的多少。
<template>
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main.png"
width="100"
height="100"
fit="thumb"
:modifiers="modifiers"
/>
</template>
<script>
export default {
data() {
return {
modifiers: {
zoom: 0.75,
gravity: "face"
}
}
}
}
</script>
colorSpace
要用于交付图像 URL 的颜色空间。有关接受的值的详细信息，请参阅 颜色空间文档。
<NuxtImg
provider="cloudinary"
src="/remote/nuxt-org/blog/going-full-static/main.png"
width="300"
:modifiers="{ colorSpace: 'srgb' }"
/>
customFunc
在 Cloudinary 端调用自定义函数。有关更多详细信息，请参阅 自定义函数。
density
在将矢量文件转换为图像格式时定义密度数。
aspectRatio
将资产裁剪或调整大小为新的纵横比，用于与确定如何将资产调整为新尺寸的裁剪/调整大小模式一起使用。