Addon not able to load images from local file paths - Githubissues

storybookjs / addon-designs

A Storybook addon that embeds Figma, websites, or images in the addon panel.

https://storybookjs.github.io/addon-designs

MIT License

869 stars 73 forks source link

Addon not able to load images from local file paths #215

Closed refugedesigns closed 11 months ago

refugedesigns commented 11 months ago

Affected design types

[ ] figma
[ ] figspec
[ ] link
[X] 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?

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

Expected behaviour

The image should be visible in the design tab

Environment

[x] Chrome / Chromium / Chromium based browsers
[ ] Firefox
[ ] macOS Safari
[ ] iOS Safari
[ ] Samsung Internet
[X] Other

Affected versions

7.0.5

Storybook versions

7.4.6

pocka commented 11 months ago

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.