您也可以使用/public目录来保存您的图像。例如，如果您在/public/image.jpg添加了一张图像，您可以在博客文章中引用该图像，如下所示：

![Alt Text](/image.jpg)

编辑：https://nextjs.org/docs/basic-features/image-optimization#local-images

把你的next.config.js想象成在幕后附加到一个已经存在的webpack.config上的东西，你不能直接访问webpack，但是你可以扩展它。
因此，为了加载图像，您需要一个适当的图像加载器。
我发现next-images最容易用途：

const withImages = require('next-images')
module.exports = withImages({
  webpack(config, options) {
    return config
  }
})

然后您可以导入：

import Img from "./image.jpg"

嘿谢谢你的提示！
从六月到现在已经有一段时间了，今天我又试了一次，现在它像我期望的那样工作。
1.我拿了MDX/Next Example
1.如下编辑next.config.js：

const withPlugins = require('next-compose-plugins');
const images = require('remark-images');
const emoji = require('remark-emoji');
const optimizedImages = require('next-optimized-images');

const withMDX = require('@zeit/next-mdx')({
  extension: /\.mdx?$/,
  options: {
    mdPlugins: [images, emoji]
  }
});

module.exports = withPlugins([
 [
   withMDX,
   {
     pageExtensions: ['js', 'jsx', 'md', 'mdx']
   }
 ],
   [optimizedImages]
 ]);

现在，它的工作完全像预期的，并在一个Markdown文件中的网页文件夹中，我能够做这样的事情：

import Layout from '../../components/Layout'
import Image from './catimage.jpg'

# Hey guys this is the heading of my post!

<img src={Image} alt="Image of a cat" />

抱歉，我迟到了，但与下一个v11您可以直接导入图像。
也就是说，您可以为Webpack添加自定义加载器来修改您的mdx文件，并使用自定义组件来处理图像。例如：

// save this somewhere such as mdxLoader and
// add it to your webpack configuration
const replaceAll = require("string.prototype.replaceall");

module.exports = function (content, map, meta) {
  return replaceAll(
    map
    content,
    /\!\[(.*)\]\((.+)\)/g,
    `<NextImage alt="$1" src={require('$2').default} />`
  );
};

并对其进行处理：

// and reference this in your MDX provider
const components = {
  NextImage: (props: any) => {
    return <Image alt={props.alt || "Image"} {...props} />;
  },
};

现在你可以在你的文章中使用降价风格的图片了！

![my image](./image.png)

但是，要包含./相对前缀。

我正在用MDX-Bundler构建一个Next.js博客，它允许你使用一个名为remark-mdx-images的评论插件，它可以将降价风格的图片转换成JSX图片。
以下是使其工作的示例配置

const {code} = await bundleMDX(source, {
  cwd: '/posts/directory/on/disk',
  xdmOptions: options => {
    options.remarkPlugins = [...(options.remarkPlugins ?? []), remarkMdxImages]

    return options
  },
  esbuildOptions: options => {
    options.outdir = '/public/directory/on/disk/img'
    options.loader = {
      ...options.loader,
      '.jpg': 'file'
    }
    options.publicPath = '/img/'
    options.write = true

    return options
  }
})

您可以查看以下资源以获得有关如何操作的详细说明。

1. Images with MDX-Bundler
   1.如何使用NextJS构建新的notjust.dev平台

如果您安装了@next/mdx软件包，则可以使用Next.js提供的<Image />组件：

// pages/cute-cat.mdx

import Image from "next/image";
import cuteCat from "./cute-cat.jpg";

# Cute cat

This is a picture of a cute cat

<Image src={cuteCat} />