Shopstory
Search…
⌃K

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/core/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.
Last modified 1mo ago