$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>