NextJS импортирует изображения в MDX

Question

Я попробовал официальный пример NextJS MDX-Blog.https://github.com/mdx-js/mdx/tree/master/examples/next

Но я не могу понять, как мне настроить конфигурацию NextJS для загрузки изображений через веб-пакет?

import img from "./image.jpg"

## Hallo Blogwelt

![My own Image]({img})

Answer 1

Привет, спасибо за совет!

Прошло много времени с июня, и сегодня я попробовал еще раз, и теперь он работает, как и ожидалось.

1. Iвзял MDX / следующий пример

2. Отредактировал 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 внутри папки 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" />

Answer 2

Представьте, что ваш next.config.js добавлен к существующему webpack.config за сценой.У вас не будет прямого доступа к веб-пакету, но вы можете расширить его.

Поэтому для загрузки изображений вам потребуется соответствующий загрузчик изображений.

Я нашел next-images проще всего использовать:

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

, тогда вы можете импортировать:

import Img from "./image.jpg"