Estoy creando una aplicación de reacción con backend express. En este código, busco una ruta a una imagen relativa a mi carpeta de "activos" y luego la importo dinámicamente. Donde tengo problemas es con esta declaración de importación. Tengo la línea const importURL: string = `../../${json.imgURL}.png` . Cuando espero que import() pase importURL, sigo recibiendo el error:
Uncaught (in promise) Error: Cannot find module '../../assets/images/backgrounds/home/background1.png' at Home|lazy|groupOptions: {}|namespace object:5:1 at async getBackground (index.tsx:17:1) Pero, el problema es que si escribo estáticamente exactamente la misma ruta en una cadena usando '' en lugar de `` , funciona.
Me pregunto si tiene que ver con no crear la cadena de forma estática, pero no creo que ese sea realmente el problema porque muestra la ruta correcta en el error.
Mi función completa está abajo. Descomentar la línea comentada y comentar las dos anteriores hace que el programa funcione como se esperaba, pero luego tengo que codificar la imagen que estoy importando.
async function getBackground(index: number) { const response: Response = await fetch(`${baseURL}home-background?i=${index}`) const json = await response.json() const importURL: string = `../../${json.imgURL}.png` const curBackground = await import(importURL) // const curBackground = await import( // '../../assets/images/backgrounds/home/background3.png' // ) setBackground(curBackground.default) }Cualquier ayuda es apreciada.