Markdown 在使用Next.js时，如何将博客的静态资产与降价文件放在一起，而不是放在公用文件夹下？

我正在用Next.js创建一个博客

或者讨论如何使用content/blogs文件夹来保存标记文件

理想情况下，我希望将每篇文章的资产保存在自己的文件夹中

据报道,

js可以为根目录中名为public的文件夹下的静态文件（如图像）提供服务。然后，您的代码可以从基本URL（/）开始引用public中的文件

但是，我不想把标记文件放在一个地方，而把它的图像放在另一个地方。我想要一个这样的文件夹结构：

- pages
  - [blog].js
- content
  - posts
    - my_first_post
      - index.mdx
      - assets
         - banner.jpeg
         - another_image.png
    - my_second_post
      - index.mdx
      - assets
         - banner.jpeg

在每个.mdx文件中，它仍然通过其到.mdx文件的相对路径引用图像

有没有一个简单的方法可以做到这一点？我在想，在构建过程中，我需要将所有资产从

内容

复制到

公共

，以使其正常工作

---

更新1：我正在使用我正在使用的，它不允许在mdx文件中导入。

我认为可以使用插件完成

您可以像这样添加插件

constwithimages=require（'next-images'）
module.exports=withImages({
网页包（配置、选项）{
返回配置
}
})

如果将

与插件一起使用

包，可以尝试以下方法

module.exports=withPlugins(
[
[
用图像，
{
inlineImageLimit:10240，
},
],
[withCSS]
]
);

配置插件后，您应该能够像下面这样导入图像

从“/assets/image.jpeg”导入横幅

在我个人看来，如果你想使用CDN，我认为使用

public

文件夹是非常有用的。您可以简单地配置，根据您的环境将CDN路径添加到您的资产中

更新1：使用下一个mdx遥控器 我做了一些搜索。在Next.js repo中有一个关于如何使用该包的示例。对于你的具体问题。我想这可能行得通

//导入您的组件。您可以直接导入图像
从“CustomImgTag”导入CustomImgTag；
//要传递给MDX的自定义组件/渲染器。
//因为MDX文件不是由webpack加载的，所以他们不知道如何加载
//处理导入语句。相反，您必须在范围中包含组件
//在这里。
常数分量={
img:CustomImgTag，
//它还适用于动态导入的组件，尤其是
//用于有条件地加载某些路由的组件。
//有关更多详细信息，请参阅README.md中的注释。
TestComponent:dynamic（（）=>import（'../../components/TestComponent'）），
头,，
}
//您可以将配置传递给renderToString
export const getStaticProps=async（{params}）=>{
//……其他代码
const mdxSource=await renderToString（内容{
组件，
//……附加配置
})
返回{
道具：{
来源：mdxSource
},
}
}

参考

请注意，答案大部分是我根据官方示例做出的最有根据的猜测。我希望它能帮助或提供一些有用的信息

---

是的，这听起来在一般情况下是可行的。我正在使用，但它不允许在mdx文件中导入。