Support all image props

[RyanClementsHax]

Many users of this addon want to be able to support all of the image props like loader, but this requires that nextjs expose a way to resolve the users config with defaults and other logic applied. There is a lot of logic applied to the user's next config that interacts with how the image component works. I have opened this feature request to serve as a central place for discussion around this issue. I have opened up this issue with the nextjs team. If this is a feature you would like to see in this addon, please up vote or comment on the issue.

Related issues:

• Next/image with imgix loader #67
• Image experimental layout="raw" support #70

[brahima]

Hello @RyanClementsHax. I hope you're doing well.

Thanks for your great addon and the time you'll take to read and answer.

I have a question regarding the nextjs image support. I've read the discussions above, the issue opened with the nextjs team, and several other issues.

I tested the workaround mentioned in #70 and indeed, it works.
However, this workaround removes the storybook-addon-next addon from the storybook addons list ... thus «fixing» the problem but also removing all the other addon's features.

I work in a 3rd party project and have just my components concerned with this custom loader problem so can't easily remove the addon.

Do you think that this is possible to have an (opt-in) option to not force the 'unoptimized' image prop to true ?

From my understanding (and test, see below), that would give the ability to workaround the custom image loader problem with the storybook-addon-next enabled at the same time ?
We will agree that this is not a final/stable solution but - waiting for a complete image props support or switching to StoryBook 7 - would be better that fully removing the addon ... if the solution is viable.

In my case, i want to use a custom loader but only for some specific instance in a few components. My loader are not configured application wide ... but still, there is the domains/remote configuration in the next.config.js.

After implementing the workaround :

• i kept the storybook-addon-next in my storybook config
• i manually modified the next-image-stub.js in my node_modules (passing unoptimized to false) to test the behavior and that seems to work ... but i would like to know if there can be some other consequences.

Indeed having unoptimized to true, the custom loader is not called (here for 13.1.6 but this is the same for 12.2.0)

Context

• NextJs 12.2.0
• Storybook : 6.5.10
• storybook-addon-next : 1.6.7

Hope my explanation clarifies the issue.
Thanks again for your help
Best regards
Brahim