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 });
Unstable: getSizes API might change or be removed.

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.size"
  ></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>
Edit this page on GitHub Updated at Fri, Oct 8, 2021