$img utility
Sometimes it's required to directly use a generated image URL with applied transformations instead of <nuxt-img>
and <nuxt-picture>
components. This is where $img
comes in.
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>