接下来JS除了将图片放在public文件夹中之外，如何动态导入图片？

Question

我正在制作一个教科书网站，其中作者每个人都贡献一个教科书文件夹，其中包含一个 markdown 文件夹和一个图像文件夹：

\n

textbooks\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80textbook-1\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80images\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80markdown-files\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80textbook-2\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80images\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80markdown-files\n

\n

我将教科书文件夹存储在项目根文件夹中，并使用 \'fs\' 在构建时读取文件。到目前为止，我必须手动将图像文件夹放入公共文件夹中，以便在 Markdown 页面中使用它们。有没有办法动态导入这些图像文件而不将它们放入公共文件夹中？

\n

我正在使用 ReactMarkdown 来渲染 markdown，我正在考虑类似的事情：

\n

textbooks\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80textbook-1\n\xe2\x94\x82   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80images\n\xe2\x94\x82   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80markdown-files\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80textbook-2\n    \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80images\n    \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80markdown-files\n

\n

但它不起作用......

\n

Answer 1

您需要导入图像，就像使用Image来自 的组件导入其他模块一样next/image。下面是来自 nextjs 文档next/image的示例

import Image from 'next/image'
import profilePic from '../public/me.png'

function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image src={profilePic} alt="Picture of the author" />
      <p>Welcome to my homepage!</p>
    </>
  )
}

export default Home