提供者
Directus
Nuxt Image 与 Directus 集成。
在 Directus 和图像模块之间集成。
要使用此提供者，您只需指定项目的根 URL 即可。
nuxt.config.ts
export default defineNuxtConfig({
image: {
directus: {
// This URL needs to include the final `assets/` directory
baseURL: 'https://127.0.0.1:8055/assets/',
}
}
})
您可以轻松地覆盖默认选项
nuxt.config.ts
export default defineNuxtConfig({
image: {
directus: {
baseURL: 'http://mydirectus-domain.com/assets/',
modifiers: {
withoutEnlargement: 'true',
transforms: [['blur', 4], ['negate']]
}
}
}
})
修饰符
所有来自 Directus 文档 的默认修饰符都可用。
<NuxtImg
provider="directus"
src="ad514db1-eb90-4523-8183-46781437e7ee"
height="512"
fit="inside"
quality="20"
:modifiers="{ withoutEnlargement: 'true' }"
/>
由于 Directus 通过 transforms 参数公开 完整的 sharp API，因此我们可以在 modifiers 属性中使用它。
<NuxtImg
provider="directus"
src="ad514db1-eb90-4523-8183-46781437e7ee"
:modifiers="{ height: '512', withoutEnlargement: 'true', transforms: [['blur', 4], ['negate']] }"
/>
请注意，正如 Directus 文档 中所述，
transforms 参数基本上是一个列表的列表。 这样做是为了方便使用那些需要多个输入值的 sharp 函数，例如 normalise：transforms: [['normalise', 1, 99], ['blur', 4], ['negate']].