next.js NextImage's broken
See original GitHub issueI’ve been using the trick here to fix optimized next.js image components:
https://storybook.js.org/blog/get-started-with-storybook-and-next-js/
// .storybook/preview.js
import * as NextImage from "next/image";
const OriginalNextImage = NextImage.default;
Object.defineProperty(NextImage, "default", {
configurable: true,
value: (props) => <OriginalNextImage {...props} unoptimized />,
});
though with latest builds, it seems to be broken. any fixes?
Issue Analytics
- State:
- Created a year ago
- Reactions:11
- Comments:11 (3 by maintainers)
Top Results From Across the Web
Next.js image display as broken image on some pages
when you want import image or file in NextJs, you dont need write Public folder. And you have to give width and height...
Read more >Fix broken images in React with Next.js - Skillthrive
If your page loads and you see a broken image, it can be pretty jarring and prevent users from exploring your content.
Read more >Next.js 10 - Images broken in the static export with new ...
There seems to be some issue with the image component, images are working fine in the development but don't work in the static...
Read more >next/image - Next.js
For a feature overview and usage information, please see the Image Component and Image Optimization documentation. Note: If you are using a version...
Read more >[Rant] Why can't NextJS and Vercel figure out images? - Reddit
Next are the constant API changes. Why did the image component break? Vercel changed the API yet again! Currently Next Image is completely ......
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thank you @optimista!
it worked by changing the following two points!
webpackFinal
returns the alteredconfig
"./.storybook/NextImage.js"
to"./NextImage.js"
Encountered same issue. It seems the fix through
defineProperty
is broken for Storybook 6.4.22 (after: https://github.com/storybookjs/storybook/pull/17875) and also for Storybook 6.5, and might not be working for new versions neither. I did resolve the issue with creating./.storybook/NextImage.js
as following:and then creating an alias for
next/image
by putting this line intowebpackFinal
function within./.storybook/main.js
Note: The
import
through../node_modules
is necessary not to create a cyclically resolving alias.