Integration between Supabase Storage and the image module.
Supabase Storage provides image transformations powered by imgproxy. This provider enables optimization and resizing of images stored in your Supabase public buckets.
To use this provider you need to specify the base URL pointing to your Supabase project's storage render endpoint.
export default defineNuxtConfig({
image: {
supabase: {
baseURL: 'https://<project-id>.supabase.co/storage/v1/render/image/public/<bucket-name>'
}
}
})
<project-id> with your Supabase project ID and <bucket-name> with your public bucket name.<NuxtImg
provider="supabase"
src="/path/to/image.jpg"
width="300"
height="200"
/>
Supabase supports the following modifiers based on Supabase's image transformation API:
widthNumberheightNumberwidth or height (not both) to maintain aspect ratio. When both are provided, the image will be resized and cropped according to the resize mode.qualityNumberresizeStringcover, contain, fillcovercover: Fills specified dimensions while maintaining aspect ratio, crops excesscontain: Fits within dimensions while maintaining aspect ratiofill: Resizes without aspect ratio preservationformatStringorigin or specific formatorigin to keep the original format, otherwise images are automatically converted to WebP<NuxtImg
provider="supabase"
src="/photos/landscape.jpg"
width="800"
height="600"
:modifiers="{ quality: 85, resize: 'cover' }"
/>
getPublicUrl()