Estoy creando un sitio web de libros de texto donde cada autor contribuye con una carpeta de libros de texto que contiene una carpeta de rebajas y una carpeta de imágenes:
textbooks ├───textbook-1 │ ├───images │ └───markdown-files └───textbook-2 ├───images └───markdown-filesEstoy almacenando la carpeta de libros de texto en la carpeta raíz de mi proyecto y estoy usando 'fs' para leer los archivos en el momento de la compilación. Hasta ahora, he tenido que colocar las carpetas de imágenes manualmente en la carpeta pública para usarlas en las páginas de rebajas. ¿Hay alguna forma de importar estos archivos de imagen dinámicamente sin colocarlos en la carpeta pública?
Estoy usando ReactMarkdown para representar el descuento y estaba pensando en algo como esto:
<NextImage src={import(`../../textbooks/textbook-1/images/${imgFile}`)} />pero no funciona...
Debe importar la imagen como lo hace con otros módulos usando el componente Image de next/image . A continuación se muestra un ejemplo de 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