Pular para o conteúdo principal

ResponsiveImage

Callable

  • Renders an image from a given Starlight media object. The Starlight optimized image will be rendered by default if no variation prop is passed.

    If the sizes prop is passed, a responsive image will be rendered by generating a “src-set” property.

    The image will be lazy-loaded, which means that it should only load when the browser viewport gets near the image.

    @example

    Requesting an entry and rendering an image.

    Assume we created a “Posts” model with a slug of posts, and placed a Media File field with a key of featured_image on it.

    import Starlight, { ResponsiveImage } from '@starlightcms/react-sdk'

    const EntryComponent = ({ slug }) => {
      const [entry, setEntry] = useState(null)

      useEffect(async () => {
        // This is just an example, you could fetch
        // the entry any way you want.
        const response = await Starlight.posts.entries.get(slug)

        setEntry(response.data)
      }, [ slug ])

      // After fetching, the image will be on the `entry.data.featured_image` property.
      return (
        entry ? (
           <article>
             <h1>{entry.title}</h1>
             <ResponsiveImage image={entry.data.featured_image} />
           </article>
        ) : (
          <div>Loading...</div>
        )
      )
    }

    Parameters

    Returns Element