Unable to import images into documentation mdx

[JamesIves]

I'm trying to import images into my mdx files but they keep throwing a 404 error and don't work. The images are stored within .storybook/documentation/assets and I'm importing them into my mdx like so:

import { Meta } from '@storybook/addon-docs/blocks';
import Logo from '../.storybook/documentation/assets/logo.png';

<Meta title="Introduction" />

<img src={Logo} />

I have an image loader configured within .storybook/main.js like so:

module.exports = {
  stories: ["../src/**/**/*.stories.mdx", "../src/**/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  configType: 'PRODUCTION',
  webpackFinal: async (config, {}) => {
    config.module.rules.push({
      test: /\.scss$/,
      use: [
        {
          loader: "style-loader",
        },
        { loader: "css-loader" },
        {
          loader: "sass-loader",
          options: {
            additionalData: '@import "./src/shared/sass/manifest.scss";',
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });

    config.module.rules.push({
      test: /\.(png|woff|woff2|eot|ttf|jpg|jpeg|gif|svg)$/,
      use: [
        {
          loader: "file-loader",
          options: {
            name: "[path][name].[ext]",
            context: "",
          },
        },
      ],
    });


    return config;
  },
};

And my start script looks like so: start-storybook -p 6006 --no-manager-cache -s ./src, I've tried modifying this but I need to serve static files from src too (it also doesn't fix the image issue anyway it seems)

The images 404 as they can't seem to find the /static/media directory: http://localhost:6006/static/media/logo.43b6b382.png

[JamesIves]

Turns out this was an issue with my image loader. Removing the rule push resolved this entirely.