# 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 your`ShopstoryProvider`:

```typescript
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.