Nuxt Image has first class integration with Sanity
Integration between Sanity and Nuxt Image.
To use this provider you just need to specify the projectId of your project in Sanity.
export default { image: { sanity: { projectId: 'yourprojectid', // Defaults to 'production' // dataset: 'development' } }}The Sanity provider supports a number of additional modifiers. For a full list, check out the Sanity documentation. All of the modifiers mentioned in the Sanity docs are supported, with the following notes.
The following more readable modifiers are also supported:
background - equivalent to bgdownload - equivalent to dlsharpen - equivalent to sharporientation - equivalent to orminHeight or min-height - equivalent to min-hmaxHeight or max-height - equivalent to max-hminWidth or min-width - equivalent to min-wmaxWidth or max-width - equivalent to max-wsaturation - equivalent to satfitIn addition to the values specified in the Sanity docs, which are respected, the following options from the default fit behavior are supported:
cover - this will behave like the Sanity modifier cropcontain - this will behave like the Sanity modifier fill, and defaults to filling with a white background. (You can specify your own background color with the background modifier.)inside - this will behave like the Sanity modifier minoutside - this will behave like the Sanity modifier maxfill - this will behave like the Sanity modifier scalefit: fill is equivalent to the Sanity parameter ?fit=scale. If you need the Sanity ?fit=fill behavior, use fit: contain instead.formatYou can specify any of the formats suppored by Sanity. If this is omitted, the Sanity provider will default to auto=format.
crop and hotspotYou can pass your Sanity crop and hotspot image data as modifiers and Nuxt Image will correctly generate the rect, fp-x and fp-y parameters for you.