How to use @sanity/image-url - 10 common examples

import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import client from 'part:@sanity/base/client'
import imageUrlBuilder from '@sanity/image-url'
import WithSnapshot from 'part:@sanity/base/with-snapshot'
import Spinner from 'part:@sanity/components/loading/spinner'
import styles from './BookCoverPreview.css'

const urlBuilder = imageUrlBuilder(client)

export default class BookCoverPreview extends React.PureComponent {
  static propTypes = {
    itemId: PropTypes.string.isRequired
  }

  state = {darkMode: false}

  actionHandlers = {
    toggleDarkMode: () => this.setState(prevState => ({darkMode: !prevState.darkMode}))
  }

  render() {
    return (
      
        {({isLoading, snapshot}) => {

import React from 'react'
import PropTypes from 'prop-types'
import imageUrlBuilder from '@sanity/image-url'
import sanityClient from '../../client'
import styles from './Image.css'

const builder = imageUrlBuilder(sanityClient)

function urlFor(source) {
  return builder
    .image(source)
    .auto('format')
    .fit('max')
    .url()
}

function Image(props) {
  if (props.node.caption) {
    return (
      <figure>
        <div>
          <img alt="{props.node.alt}" src="{urlFor(props.node)}">
        </div></figure>

function urlFor (source) {
  return imageUrlBuilder(client).image(source)
}

import clientConfig from '../../client-config'
import imageUrlBuilder from '@sanity/image-url'

const builder = imageUrlBuilder(clientConfig.sanity)

export function imageUrlFor (source) {
  return builder.image(source)
}

function urlFor(source) {
  return imageUrlBuilder(client).image(source)
}

const urlFor = source => urlBuilder(client).image(source);

function urlFor (source) {
  return imageUrlBuilder(client).image(source)
}

import React from "react";
import Link from "next/link";
import Layout from "../components/Layout";
import sanity from "../lib/sanity";
import listStyles from "../styles/list";
import sanityClient from "../lib/sanity";
import imageUrlBuilder from "@sanity/image-url";

const imageBuilder = imageUrlBuilder(sanityClient);

function imageUrlFor(source) {
  return imageBuilder.image(source);
}

const query = `*[_type == "movie"] {
  _id,
  title,
  releaseDate,
  poster,
  "posterAspect": poster.asset->.metadata.dimensions.aspectRatio,
  "director": crewMembers[job == "Director"][0].person->name
}[0...50]
`;

function Movies({ movies }) {

import React from "react";
import Link from "next/link";
import Layout from "../../components/Layout";
import sanity from "../../lib/sanity";
import listStyles from "../../styles/list";
import sanityClient from "../../lib/sanity";
import imageUrlBuilder from "@sanity/image-url";

const imageBuilder = imageUrlBuilder(sanityClient);

function imageUrlFor(source) {
  return imageBuilder.image(source);
}

const query = `*[_type == "person" && _id == $id] {
  _id,
  name,
  image,
  "actedIn": *[_type == "movie" && references(^._id)] {
    _id,
    title,
    releaseDate,
    poster
  }
}[0]