I am making a textbook website where authors each contribute a textbook folder containing a markdown folder and an images folder:
textbooks
├───textbook-1
│ ├───images
│ └───markdown-files
└───textbook-2
├───images
└───markdown-files
I am storing the textbooks folder in my project root folder and I am using 'fs' to read the files at build time. Until now I have had to place the images folders manually into the public folder, in order to use them in the markdown pages. Is there any way to import these image files dynamically without putting them into the public folder?
I am using ReactMarkdown to render the markdown and I was thinking about something along the lines of this:
<NextImage src={import(`../../textbooks/textbook-1/images/${imgFile}`)} />
but it isn't working...
You need to import the image such as you do with other modules using the Image component from next/image. Below is an example from nextjs docs 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