Rebuild images to nuxt-image
Settings and examples for rebuilding to nuxt-image.
Settings
It requires nuxt-image provider settings.
nuxt.config.js
{
image: {
imgix: {
baseURL: "https://images.microcms-assets.io/",
},
},
}
And rehype-image-salt settings.
nuxt.config.js
{
content: {
markdown: {
rehypePlugins: [
[
"@hankei6km/rehype-image-salt",
{
baseURL: "https://images.microcms-assets.io/",
rebuild: {
tagName: "nuxt-img",
baseAttrs: 'provider="imgix" data-salt-q=""',
},
},
],
],
},
}
}
-
baseURLfromprovidersettings -
tagNameisnuxt-imgornuxt-picture -
baseAttrsisprovider="imgix" data-salt-q=""providerto select Providerdata-salt-qremove query parameters by CMS added(it conflict to nuxt-image)- If there is a default value for the entire content, it is also available(ie.
fitsizesmodifiers)
Examples
sizes
{
width="600" height="337"
sizes="sm:100vw md:50vw lg:400px"
}
fit
{
width="200" height="400"
fit="cover"
}
imgix best practices
{
width="300" height="500"
fit="cover"
modifiers="auto=format,compress&crop=faces"
}
{
width="300" height="500"
fit="cover"
modifiers="auto=format,compress&crop=faces"
}
You can easily write an image that applied "imgix best practices" style using baseAttrs.
