Integration between Directus and the image module.
To use this provider you just need to specify the base URL of your project.
export default defineNuxtConfig({
image: {
directus: {
// This URL needs to include the final `assets/` directory
baseURL: 'http://localhost:8055/assets'
}
}
})
You can easily override default options:
export default defineNuxtConfig({
image: {
directus: {
baseURL: 'http://mydirectus-domain.com/assets',
modifiers: {
withoutEnlargement: 'true',
transforms: [['blur', 4], ['negate']]
}
}
}
})
All the default modifiers from Directus documentation are available.
<NuxtImg
provider="directus"
src="ad514db1-eb90-4523-8183-46781437e7ee"
height="512"
fit="inside"
quality="20"
:modifiers="{ withoutEnlargement: 'true' }"
/>
Since Directus exposes the full sharp API through the transforms parameter, we can use it inside our modifiers prop:
<NuxtImg
provider="directus"
src="ad514db1-eb90-4523-8183-46781437e7ee"
:modifiers="{
height: '512',
withoutEnlargement: 'true',
transforms: [['blur', 4], ['negate']]
}"
/>
transforms parameter, as stated in the Directus documentation, is basically a list of lists. This is to facilitate the use of those sharp functions, like normalise, that would need multiple values in input: transforms: [['normalise', 1, 99], ['blur', 4], ['negate']].