Usage
useImage()
A Vue composable that returns a helper function to generate optimized image URLs.
Sometimes you might need to use a generated image URL directly with applied transformations instead of the <NuxtImg> and <NuxtPicture> components. This is where useImage() comes in (and the helper function it returns, which you will often see referenced directly as $img or img).
Usage
const img = useImage()
img(src, modifiers, options)
Example: Generate image URL for backgroundImage style.
const img = useImage()
const backgroundStyles = computed(() => {
const imgUrl = img('https://github.com/nuxt.png', { width: 100 })
return { backgroundImage: `url('${imgUrl}')` }
})
img.getSizes
const img = useImage()
img.getSizes(src, { sizes, modifiers })
Unstable:
getSizes API might change or be removed.Parameters:
src: (string) Source to original image idsizes: (string) List of responsive image sizes ({breakpoint}:{size}{unit})modifiers: (object) Modifiers passed to provider for resizing and optimizingwidth: resize to the specified width (in pixels)height: resize to specified height (in pixels)quality: Change image quality (0 to 100)format: Change the image format- (any other custom provider modifier)
options: (object)
Example: Responsive srcset with Vuetify v-img
<script setup lang="ts">
const props = defineProps({
height: { type: [Number, String], default: 500 },
src: {
type: String,
default: '/img/header-bg.jpg'
}
})
const img = useImage()
const _srcset = computed(() => {
return img.getSizes(props.src, {
sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',
modifiers: {
format: 'webp',
quality: 70,
height: props.height
}
})
})
</script>
<template>
<v-img
:lazy-src="img(src, { width: 10, quality: 70 })"
:src="img(src, { height, quality: 70 })"
:srcset="_srcset.srcset"
:height="height"
:sizes="_srcset.sizes"
></v-img>
</template>