Stuck on an issue?
Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
Next 12.1.5 error: Failed to parse src "static/media/public/nyan-cat.png"
See original GitHub issueDescribe the bug
As of Next 12.1.5, this addon no longer seems to work with Next Image.
Full error message:
Error: Failed to parse src "static/media/public/nyan-cat.png" on `next/image`, if using relative image it must start with a leading slash "/" or be an absolute URL (http:// or https://)
at defaultLoader (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55971:23)
at defaultImageLoader (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55790:16)
at http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55755:39
at Array.map (<anonymous>)
at generateImgAttrs (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55755:24)
at ImageElement (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:55896:183)
at renderWithHooks (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:79513:18)
at mountIndeterminateComponent (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:82339:13)
at beginWork (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:83577:16)
at HTMLUnknownElement.callCallback (http://localhost:6006/vendors-node_modules_storybook_addon-actions_dist_esm_preset_addArgs_js-generated-config-entr-68d96e.iframe.bundle.js:68473:14)
Your minimal, reproducible example
https://github.com/rsanchez-forks/storybook-addon-next/tree/next-12.1.5-issue/examples/nextv12
Steps to reproduce
- In
examples/nextv12, runyarn add next@12.1.5 - Run
yarn storybook - Go to Nextjs Images Page in storybook
- Observer error in storybook
Expected behavior
As a user, expect next-image to work within Storybook.
How often does this bug happen?
Every time
Screenshots or Videos
Platform
- OS: macOS
- Browser: Chrome
- Version: 100.0.4896.75
storybook-addon-next version
Main branch, Commit hash a7efc092c5db5b6e96c9dfeb478bca01567fe1c6
Additional context
Next 12.1.4 does not have the same issue.
Issue Analytics
- State:
- Created a year ago
- Reactions:6
- Comments:13 (6 by maintainers)
Top Results From Across the Web
Failed to parse src error when importing an image in Next.js
The image is located in public folder, this is the Error I get when I run the server. Error: Failed to parse src...
Read more >How to Use the Next.js Image Component in Storybook
Storybook can't seem to find the image you statically import from your public directory, resulting in the following error: Failed to parse src...
Read more >Next.js automatic image optimization with next/image
If the image src is a static import with the MIME-type jpg , png , or webp , the blurDataURL automatically populates. For...
Read more >How To Set Up Next.JS With Jest, React Testing Library and ...
JS documentation, some users might run into an error saying Failed to parse src "test-file-stub" on 'next/image' . If you ever run into...
Read more >A no config Storybook addon that makes Next.js features just ...
Error : Failed to parse src "static/media/public/nyan-cat.png" on `next/image`, if using relative image it must start with a leading slash ...
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 all for your patience! I’m working with Next.js to figure out what the issue exactly is and how to remediate it
I can confirm that after updating to
1.6.4, images rendered correctly on storybook local, and production builds. And also on Chromatic