Addon not able to load images from local file paths

[refugedesigns]

Affected design types

• figma
• figspec
• link
• image
• iframe

Describe the bug

The configuration in the docs is for old version of addon-design https://storybookjs.github.io/addon-designs/?path=/story/docs-image-readme--page. However using the same configuration is not working in the latest version

How to reproduce the bug?

1. npm install @storybook/addon-designs
2. add "@storybook/addon-designs" to main.ts or main.js
3. restart storybook
4. import a local image eg. "import HeaderImage from '/path/to/image'"
5. The image appear is broken in the design tab

Expected behaviour

The image should be visible in the design tab

Environment

• Chrome / Chromium / Chromium based browsers
• Firefox
• macOS Safari
• iOS Safari
• Samsung Internet
• Other

Affected versions

7.0.5

Storybook versions

7.4.6

[pocka]

Cannot reproduce with Storybook v7.4.6 (Vite builder) and Designs Addon v7.0.5.
Please attach a repro repo or code sandbox if it does not work with default configurations.

This addon does (should) not care about module format of non-JS files. A user is responsible to pass a valid URL to the addon. I don't know about webpack5 builder, but both Vite builder and webpack4 builder output an URL of the image file as a default export, hence the example.