Javascript NextJS在MDX中导入图像_Javascript_Reactjs_Nextjs

Javascript NextJS在MDX中导入图像

javascript reactjs

Javascript NextJS在MDX中导入图像,javascript,reactjs,nextjs,Javascript,Reactjs,Nextjs,我尝试了一个官方的NextJS MDX博客示例。但我不知道如何设置NextJS配置以通过webpack加载图像 import img from "./image.jpg" ## Hallo Blogwelt ![My own Image]({img}) 将您的next.config.js想象为在幕后附加到现有webpack.config的东西。您将无法直接访问该网页，但可以扩展它因此，为了加载图像，您需要一个合适的图像加载器我发现最容易使用： const withImages =

我尝试了一个官方的NextJS MDX博客示例。

但我不知道如何设置NextJS配置以通过webpack加载图像

import img from "./image.jpg"

## Hallo Blogwelt

![My own Image]({img})

将您的

next.config.js

想象为在幕后附加到现有

webpack.config

的东西。您将无法直接访问该网页，但可以扩展它

因此，为了加载图像，您需要一个合适的图像加载器

我发现最容易使用：

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

然后您可以导入：

import Img from "./image.jpg"

将您的

next.config.js

想象为在幕后附加到现有

webpack.config

的东西。您将无法直接访问该网页，但可以扩展它

因此，为了加载图像，您需要一个合适的图像加载器

我发现最容易使用：

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

然后您可以导入：

import Img from "./image.jpg"

嘿，谢谢你的提示

从6月份开始已经有一段时间了，a今天又尝试了一次，现在它的工作方式和我期望的一样

我拿了

编辑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]
 ]);

现在，它的工作原理与预期完全相同，在pages文件夹中的标记文件中，我可以执行以下操作：

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" />

![Alt Text](/image.jpg)

从“../../components/Layout”导入布局
从“./catimage.jpg”导入图像
#嘿，伙计们，这是我帖子的标题！