Image formatting

Global helper

This module defines a global <SanityImage> component to assist with auto-generating your image URLs. It is a lightweight functional component that simply turns the props into a valid image URL.

Props

assetId

The Sanity asset ID (of the form image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg).

• Type: string
• Required

projectId and dataset

These default to the projectId and dataset passed into the module options but can be overridden.

• Type: string

Image transformation props

All other image transformation options are valid props - see the Sanity documentation for more details.

Example

<template>  <SanityImage    asset-id="image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg"    auto="format"  /></template>

Renderless usage

If you pass in a default scoped slot you can use the <SanityImage> component as a renderless component to allow you to take full control of the functionality.

Example

<template>  <SanityImage    asset-id="image-G3i4emG6B8JnTmGoN0UjgAp8-300x450-jpg"    auto="format"  >    <template #default="{ src }">      <img :src="src" />    </template>  </SanityImage></template>

Using @sanity/image-url

If the SanityImage helper doesn't cover your needs, you can use the @sanity/image-url package. One way to add it to your Nuxt project is through a plugin:

import imageUrlBuilder from '@sanity/image-url'export default defineNuxtPlugin(() => {  const builder = imageUrlBuilder(useSanity().config)  function urlFor(source) {    return builder.image(source).auto('format')  }  return {    provide: { urlFor }  }})

Then you can use the global $urlFor helper:

<template>  <img    :src="$urlFor(movie.image).size(426).url()"    :alt="movie.title"    height="426"    width="426"    loading="lazy"  /></template>