Image not displayed correctly because image path is relative

Apparently I missed some configuration on .storybook/main.js. After adding staticDirs: ['../../../../../web'] to config, the image displayed correctly

Setting staticDirs to your web root still isn't ideal, as this means if you try to push storybook to Chromatic, it will attempt to push your entire website (which Chromatic won't allow).

I would be nice to have something to dynamically push image derivatives and/or change image paths before the render to story book. That way you can target the exact asset files you need.

I've only just run into this now, so I'm not sure what the best solution is or whether someone has already figured it out. I'll update here if I come across a better approach.

I'm thinking something along the lines of:
1. User manually sets a derivatives static directory in the files folder. E.g. staticDirs: ['../web/sites/default/files/storybook-derivatives']
2. When rendering the story (in storybook's route), we make the code check for any image derivatives.
3. Any image derivatives found, we first make ensure the derivative is generated and make a copy to the storybook derivatives dir.
4. Then modify the markup to the image derivatives point their paths to the new copies we've created
5. This could all be configured/enabled/disabled through the module configs, so it can accommodate different builds as needed.

Here's a simple patch to do the alternative approach I mentioned. This might be enough on its own!

It would be very helpful if someone could review this patch.