How to add an image in Storybook within a component

Question

I am trying to add a logo image (svg) to my nav component. I am using Storybook and next.js.

I followed the config from Storybook, but the image does not load in the storybook component.

Why is this?

// .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'/>
  )
}

The logo does not appear in the nav

Answer 1

I've added it successfully, you need to do these:
1- add the static path as mentioned in the docs.
staticDirs: ['../public']
2- rerun the storybook command after changing main.js
2- add the image file like <img src="/images/img.png" /> to your component