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

Question

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

我按照 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
后重新运行故事书命令 2- 将 <img src="/images/img.png" /> 之类的图像文件添加到您的组件

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

How to add an image in Storybook within a component

image

reactjs

next.js

storybook