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.

Hello,

I had the same problem but the solution provided in #5 was not working for me. It was appending the language prefix to the URL.

So, with #5, the assets were being loaded from `domain.com/en/sites/default/files/...` instead of `domain.com/sites/default/files/...`.

I have slightly modified the URL generation to avoid this problem.

I am wondering why Drupal\Storybook\FileUrlGenerator is not doing its job here. Can anyone here debug through this?

#5 failed for me when using x1 and x2 sized images for high definition devices. Only the first path was converted, so I was left with something like:

<source srcset="https://my.site.com/sites/default/files/styles/media_xl_1x/public/myfile.jpg 1x, /sites/default/files/styles/media_xl_2x/public/myfile.jpg 2x" media="all and (min-width: 1536px)" type="image/jpeg" width="3840" height="2160">

I extended the patch in #5 for my use case. It still feels like a hack as it's just running a couple of preg_replace on the markup.

Maybe it's a `twig_tweak` issue, we could use `drupal_image()` with absolute path argument.