@nuxtjs/sanity @nuxtjs/sanity

Image formatting

Access text, images, and other media with Nuxt and the Sanity headless CMS.

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>

Local import

You may wish to import SanityImage only in the components that need it, if you have disabled the global imageHelper option.

Example

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

<script>
import { SanityImage } from '@nuxtjs/sanity/dist/components/sanity-image'

export default {
  components: { SanityImage },
}
</script>

Renderless usage

If you pass in a default scopedSlot 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:

plugins/sanity-image-builder.js
import imageUrlBuilder from '@sanity/image-url'

export default ({ $sanity }, inject) => {
  const builder = imageUrlBuilder($sanity.config)
  function urlFor(source) {
    return builder.image(source).auto('format')
  }
  inject('urlFor', urlFor)
}

Then you can use the global $urlFor helper:

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