question-mark
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/image with imgix loader

See original GitHub issue

Describe 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:closed
  • Created a year ago
  • Comments:9 (5 by maintainers)

github_iconTop GitHub Comments

1reaction
RyanClementsHaxcommented, Apr 10, 2022

This seems to be solved also by solving #70. So check there for updates for now.

0reactions
RyanClementsHaxcommented, Sep 22, 2022

I have created this discussion to centralize supporting these nextjs props https://github.com/RyanClementsHax/storybook-addon-next/discussions/119

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found