如何在组件内的 Storybook 中添加图像

Question

我正在尝试将徽标图像（svg）添加到我的导航组件中。我正在使用 Storybook 和 next.js。

我遵循Storybook中的配置，但图像未加载到 Storybook 组件中。

为什么是这样？

// .storybook/main.js

module.exports = {
  stories: [],
  addons: [],
  staticDirs: ['../public/images'],
};

// Nav.stories.mdx
import {Nav} from './Nav'
import {Canvas, Meta, Story} from '@storybook/addon-docs'

<Meta title="micro/Nav" component={Nav} />

export const Template = (args) => <Nav {...args} />

# The Nav

Unauthenticated user

<Canvas>
  <Story name="nav-unauthenticated">{Template.bind({})}</Story>
</Canvas>

//Nav.js
import logo from '../../public/images/logo.svg'

export const Nav = () => {
  return(
    <img {...logo} alt='logo'/>
  )
}

徽标未出现在导航中

Answer 1

我已成功添加它，您需要执行以下操作：
1-添加文档中提到的静态路径。
staticDirs: ['../public']
2- 更改 main.js 后重新运行 Storybook 命令
2- 将图像文件添加<img src="/images/img.png" />到组件中