Storybook not rendering images in png and jpeg format

Question

I'm using Nextjs and storybook , storybook isn't displaying images that are in png and jpg format. It only displays images that are in svg format

I expected to get an image but got a broken image navbar logo is an image in png format

I did this to integrate nextjs and storybook

npx storybook@next init

https://storybook.js.org/blog/integrate-nextjs-and-storybook-automatically/

//.storybook/main.ts
import type { StorybookConfig } from '@storybook/react-webpack5'
const config: StorybookConfig = {
  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    "storybook-addon-next-router"
  ],
  framework: {
    name: '@storybook/react-webpack5',
    options: {},
  },
  docs: {
    autodocs: 'tag',
  },
  staticDirs: ['../public'],
}
export default config






//preview.ts
import type { Preview } from '@storybook/react'
import { RouterContext } from 'next/dist/shared/lib/router-context'
import '../styles/global.css'


const preview: Preview = {
  parameters: {
    backgrounds: {
      default: 'white',
    },
    nextRouter: {
      Provider: RouterContext.Provider,
    },
    actions: { argTypesRegex: '^on[A-Z].*' },
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/,
      },
    },
  },
}

export default preview

Answer 1

I had the same problem, my solution was that since tsconfig.json does not apply to storybook, i had to write many ../ to get to the image

// filename: ProjectCard.stories.tsx

import { ProjectCard } from "./ProjectCard";
import NewYork from "../../../assets/img/NewYork.jpg";

export default {
  title: "molecules/ProjectCard",
  component: ProjectCard,
};

export const Default = {
  args: {
    img_url: NewYork,
  },
};

Then in the component i wrote <Box bgImage={img_src} /> or <Image src={img_src} />