$img utility

Sometimes it's required to directly use a generated image URL with applied transformations instead of <nuxt-img> and <nuxt-picture> components.

Usage

$img(src, modifiers, options)

Example: Generate image URL for backgroundImage style.

export default {  computed: {    backgroundStyles() {      const imgUrl = this.$img('https://github.com/nuxt.png', { width: 100 })      return {        backgroundImage: `url('${imgUrl}')`      }    }  }}

$img.getSizes

$img.getSizes(src, { sizes, modifiers });

Parameters:

• src: (string) Source to original image id
• sizes: (string) List of responsive image sizes ({breakpoint}:{size}{unit})
• modifiers: (object) Modifiers passed to provider for resizing and optimizing
  • width: 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)
  • provider: (string) Provider name other than default (see providers)
  • preset: Use a preset

Example: Responsive srcset with Vuetify v-img

<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><script>  export default {    props: {      height: { type: [Number, String], default: 500 },      src: {        type: String,        default: '/img/header-bg.jpg',      },    },    computed: {      _srcset() {        return this.$img.getSizes(this.src, {          sizes: 'xs:100vw sm:100vw md:100vw lg:100vw xl:100vw',          modifiers: {            format: 'webp',            quality: 70,            height: 500,          },        });      },    },  };</script>