How to generate sanity image url? about sanity HOT 3 CLOSED

Yes, this is also what I do. 👍

I recommend adding format('auto') inside the plugin to automatically get webp images in supported browsers:
builder.image(source).auto('format')

When using the plugin, I think it's not necessary to pass asset._ref. This should also work:
<img :src="$urlFor(image).url()" />

from sanity.

Hi!
@danielroe recently added a nice feature: renderless component for images
If the renderless component doesn't cover your use case, you need to use the @sanity/image-url package.

from sanity.

Hello @AxelBriche,
I've managed like that:

~/plugins/urlResolver.js

import imageUrlBuilder from '@sanity/image-url'

export default ({ $sanity }, inject) => {
  const builder = imageUrlBuilder($sanity.config)

  function urlFor(source) {
    return builder.image(source)
  }

  inject('urlFor', urlFor)
}

imported into nuxt.config.js

  plugins: [
   ...,
    '~/plugins/urlResolver',
   ...
  ]

and then into my vue instance:

<img :src="$urlFor(image.asset._ref).url()" />

or you can call on your computed, methods, or so...

mounted() {
   console.log(this.$urlFor(this.image.asset._ref).url())
}

hope can be this helpful.

L.

from sanity.