DEV Community

How to Use the Next.js Image Component in Storybook

Jonas Schumacher on July 21, 2021

In this post, we will be setting up Next.js and Storybook in a way that makes it possible to use Next.js' Image component in components rendered in...

Read full post

Dani Amsalem • Mar 12 '22

Very, very helpful! I'm also using Sanity.io as a CMS and had to use a fallback prop since I'm not passing in JSON data for each image. If anyone else wants to know what I did, I just used the OR operator like so:

<Image
  src={storyHero || urlFor(heroImage.url).auto("format").size(600, 338).url()}
  alt={storyAlt || heroImage?.alt}
  width={600}
  height={338}
  layout={"responsive"}
/>

José María CL • Oct 13 '22

Hey! Thank you so much! You've saved me a lot of time

Jonas Schumacher • Oct 14 '22

Glad it helped!

Irving Caamal • Nov 25 '21

Works like a charm, thanks.

Ryan Killeen • Jan 28 '22

This was a life-saver, thanks!

Muhammad Bilal Mohib-ul-Nabi • Apr 1 '22

Thank you very much for sharing.It was really helpful.

Xiao Yun • Mar 29 '22

Very helpful post. I struggled to find solution for 3 hours but no other blog could help me. I solved after reading this post.
Many thanks Jonas!!! :)

Alfredo Salzillo • May 28 '22

It's not working for me

Jonas Schumacher • May 29 '22

Something might have changed since I wrote the post. Can you tell me more specifics? What is not working exactly? Do you get any error messages? Then I will try to update the post.

Oleg Galaburda • Jun 3 '22

Didn't work for me either. What worked for me is providing defaultProps with unoptimized = true in "preview.js"

import Image from 'next/image';

Image.propTypes = {
  unoptimized: null,
};

Image.defaultProps = {
  unoptimized: true,
};

Pablo • Jul 4 '22

Thank you both, guys! Oleg's tweak was needed as well in to make it work properly ("next": "12.1.6" + "@storybook/react": "^6.5.9")

Jonas Schumacher • Jul 16 '22 • Edited

Hey! Sorry, I'm currently working with neither next nor storybook anymore and frankly, don't have the time right now to go into this and comprehend what is going on. Still, this post seems to be pretty popular and I'd like it to be at least correct and runnable when people find it. Would you be willing to suggest the necessary changes to my post to make it map to what you had to do? I would then change the necessary parts and mark you as contributors. Would be really cool!

Rafael Padovani • Aug 23 '21

Thank you for sharing, Jonas. I ran into this problem and your article helped me a lot!

Jonas Schumacher • Aug 24 '21

Hey Rafael, really glad to hear that! If you run into any other problems related to this, please tell me about them and your solution and I will add them to the post (with attribution to you of course).