Este es mi flujo de trabajo actual para importar imágenes e íconos en un paquete web a través de ES6:
import cat from './images/cat1.jpg' import cat2 from './images/cat2.svg' import doggy from './images/doggy.png' import turtle from './images/turtle.png' <img src={doggy} />Esto se complica rápido. Esto es lo que quiero:
import * from './images' <img src={doggy} /> <img src={turtle} />Siento que debe haber alguna forma de importar dinámicamente todos los archivos de un directorio específico como su nombre sin extensión, y luego usar esos archivos según sea necesario.
¿Alguien ha visto esto hecho o tiene alguna idea sobre la mejor manera de hacerlo?
ACTUALIZAR:
Usando la respuesta seleccionada, pude hacer esto:
function importAll(r) { let images = {}; r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); }); return images; } const images = importAll(require.context('./images', false, /\.(png|jpe?g|svg)$/)); <img src={images['doggy.png']} />Siento que debe haber alguna forma de importar dinámicamente todos los archivos de un directorio específico como su nombre sin extensión, y luego usar esos archivos según sea necesario.
No en ES6. El objetivo de la import y export es que las dependencias se pueden determinar de forma estática , es decir, sin ejecutar código.
Pero como está utilizando un paquete web, eche un vistazo a require.context . Debería poder hacer lo siguiente:
function importAll(r) { return r.keys().map(r); } const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));Un enfoque funcional para resolver este problema:
const importAll = require => require.keys().reduce((acc, next) => { acc[next.replace("./", "")] = require(next); return acc; }, {}); const images = importAll( require.context("./image", false, /\.(png|jpe?g|svg)$/) );Es fácil. Puede usar require (un método estático, la importación es solo para archivos dinámicos) dentro del render . Como el siguiente ejemplo:
render() { const { someProp, } = this.props const graphImage = require('./graph-' + anyVariable + '.png') const tableImage = require('./table-' + anyVariable2 + '.png') return ( <img src={graphImage}/> ) }