How to use the @sanity/image-url function in @sanity/image-url

To help you get started, we’ve selected a few @sanity/image-url examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sanity-io / sanity / packages / test-studio / src / components / BookCoverPreview.js View on Github external
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}) => {
github sanity-io / sanity / packages / @sanity / studio-hints / src / components / serializers / Image.js View on Github external
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>
github sanity-io / sanity / packages / preview-gatsby-blog-web / src / lib / image-url.js View on Github external
import clientConfig from '../../client-config'
import imageUrlBuilder from '@sanity/image-url'

const builder = imageUrlBuilder(clientConfig.sanity)

export function imageUrlFor (source) {
  return builder.image(source)
}
github sanity-io / tutorial-sanity-blog-react-next / pages / Blog / Post.js View on Github external
function urlFor(source) {
  return imageUrlBuilder(client).image(source)
}
github sanity-io / example-frontend-next-js / pages / movies.js View on Github external
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 }) {
github sanity-io / example-frontend-next-js / pages / person / [id].js View on Github external
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]

@sanity/image-url

Tools to generate image urls from Sanity content

MIT
Latest version published 2 years ago

Package Health Score

62 / 100
Full package analysis

Popular @sanity/image-url functions