How to import image to the panel?

[egor-xyz]

How to import and use images? For example in src/Panel.tsx file:

import logo from "../assets/logo.png";

...
<Fragment>
  <img src={logo} />

  Addons1 can gather details about how a story is rendered. This is
  panel uses a tab pattern. Click the button below to fetch data for
  the other two tabs.
</Fragment>
...

Vite moved image in dist folder:

dist/logo-TFTQLNMJ.png

but path to this image ./logo-TFTQLNMJ.png
Correct URL to image in storybook dev mode must be: /dist/logo-TFTQLNMJ.png

And it doesn't work when I'm using the addon in another storybook.

[Sidnioulz]

Hey there! Here's how you can do based on the Storybook 10 ESM-only branch.

In your code, use static URLs:

// src/Panel.tsx
<Fragment>
  <img src="/storybook-addon-example/logo.png" alt="<any text that appears in the logo>" />
</Fragment>

You'll then want your users to add your addon's static folder asset to their staticDirs. The first step will be to distribute it in your NPM package:

{
  "exports": {
    "./package.json": "./package.json",
+    "./static": "./static"
  },
  "files": [
    "dist/**/*",
    "README.md",
    "*.js",
+    "static/**/*"
  ],
}

Then make your users add your exported images to their staticDirs:

// .storybook/main.ts
import type { StorybookConfig } from '@storybook/react-vite'
import { fileURLToPath } from 'node:url'

const config: StorybookConfig = {
  staticDirs: [
    {
      from: fileURLToPath(import.meta.resolve('storybook-addon-example/static')),
      to: '/storybook-addon-example',
    },
  ],
}

export default config