Next/image with imgix loader
See original GitHub issueDescribe the bug
Does not add absolute path to the imgix server for the img src.
Your minimal, reproducible example
Sorry no repo…
Steps to reproduce
Use next/image component in a story with the following configuration:
next.config
images: {
loader: "imgix",
path: "https://my-account.imgix.net",
},
Component with next/image
<Image src={"7f552320-6810-5a2d-8a47-521b22068ae5"} alt={"Alt"} width={42} height={42} />
Expected behavior
When running Next (yarn dev) the img src will automatically be set to https://my-account.imgix.net/7f552320-6810-5a2d-8a47-521b22068ae5.
When running Storybook the img src will only be 7f552320-6810-5a2d-8a47-521b22068ae5 right now. This results in a load to localhost and a 404 response.
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
macOS
storybook-addon-next version
v1.6.2
Additional context
No response
Issue Analytics
- State:
- Created a year ago
- Comments:9 (5 by maintainers)
Top Results From Across the Web
delicious-simplicity/next-image-imgix-loader - GitHub
A comprehensive Imgix image loader for the Next.js Image component. Features. Allows for native imgix image params/options; Similar error boundaries as next/ ......
Read more >imgix - How can I configure an external image loader in next.js ...
I'm using next.js export to create a static html export which is hosted on google cloud storage. I use this workaround in my...
Read more >next-image-loader - npm
next-image -loader. TypeScript icon, indicating that this package has built-in type declarations. 3.0.0 • Public • Published 22 days ago.
Read more >Basic Features: Image Optimization - Next.js
Next.js supports built-in image optimization, as well as third party loaders for Imgix, Cloudinary, and more! Learn more here.
Read more >next/image with loader behaviour : r/nextjs - Reddit
I've been using Imgix for images, and had that handling image conversion for files in AWS. The CMS then provided a link back...
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

This seems to be solved also by solving #70. So check there for updates for now.
I have created this discussion to centralize supporting these nextjs props https://github.com/RyanClementsHax/storybook-addon-next/discussions/119