Images are missing in chromatic build

Question

I have configured chromatic for my stories: When I pushed my chromatic build it always shows images are missing(but actually on baseline images are there but in chromatic build it shows images are missing): please check screenshot below:

Below is my story code:

export const WideExample = () => {
  stubMetadata();
  stubMainMenu();
  stubFooterMenu();
  stubFooterMetaMenu();

  let views = [];

  let args = {
    pageContext: {
      slug: "test",
      id: "1",
      language: "en-US",
      views: [],
      settings: {
        productSelector: dynamicProductSelector
      }
    },
    ...productNode,
  };

  return (
    <LocationProvider>
      <Product {...args} />;
    </LocationProvider>
  );
};
WideExample .parameters = {
  storyshots: { disable: true },
};

and my .storybook/main.js file:

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    'storybook-css-modules-preset',
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-postcss",
    // 'storybook-addon-mock/register',
    'storybook-addon-fetch-mock',
  ],
  core: {
    builder: "webpack5",
  },
  staticDirs: ['../public', '../static', '../storybook-assets', ],

my webpack.config.js file:

const path = require('path');

module.exports = ({ config, mode }) => {

  

    config.module.rules.push({
        test: /\.module\.css$/,
        use: [
          {
            loader: 'postcss-loader',
            options: {
              sourceMap: true,
              postcssOptions: {
                config: './.storybook/',
              },
            },
          },
        ],
        
        include: path.resolve(__dirname, '../storybook/'),
      });
    
      return config;
    };

Can anyone look where I am wrong and need fix?