Shopstory
  • Overview
  • Getting started
    • Installation
    • Connecting CMS
      • Contentful
      • Sanity
    • Displaying content
    • Content modeling with Shopstory
  • Devices and breakpoints
  • Design tokens
    • Colors
    • Spacings
    • Fonts
    • Page containers
      • Margins
      • Max width
    • Aspect ratios
    • Missing tokens
  • Custom code
    • Components
    • Buttons
    • Actions
    • Links
  • Resources
  • Image
  • Analytics
  • Schema reference
  • CMS Guides
    • Contentful
    • Sanity
Powered by GitBook
On this page

Image

By default Shopstory renders images as <img src>. However, as with links, there are multiple reasons to use your own custom image component. For example, next/image from next.js has built-in image optimisation. If you want to use it across your entire website you can set next/image as the default image renderer for Shopstory.

Example: next/image

In order to use a custom image in Shopstory just pass Image property in yourShopstoryProvider:

import { ShopstoryProvider, ImageProps } from "@shopstory/react";
import NextImage from "next/image";

const Image : React.FC<ImageProps> = (props) => {
  return <NextImage src={props.src} alt={props.alt} layout={"fill"} />
}

export const DemoShopstoryProvider : React.FC = ({ children }) => {
  return <ShopstoryProvider
    Image={Image}
  >
    { children }
  </ShopstoryProvider>
}

Please remember that your custom image must be displayed so that it fills the parent container.

PreviousResourcesNextAnalytics

Last updated 2 years ago