reactjs - import images from folder react

Importe dinámicamente imágenes desde un directorio usando webpack

Question

Así que aquí está mi flujo de trabajo actual para importar imágenes e íconos en el 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 vuelve desordenado 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'']} />

Answer 1

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. Todo el punto de import y export es que las dependencias pueden determinarse estáticamente , es decir, sin ejecutar código.

Pero como está usando webpack, 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)$/));

Answer 2

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}/>
    )
}

Answer 3

Tengo un directorio de banderas de países png llamado como au.png, nl.png, etc. Así que tengo:

const testFolder = ''./'';
const fs = require(''fs'');
const path = require(''path'')

const allowedExts = [
  ''.png'' // add any extensions you need
]

const modules = {};

const files = fs.readdirSync(testFolder);

if (files && files.length) {
  files
    .filter(file => allowedExts.indexOf(path.extname(file)) > -1)
    .forEach(file => exports[path.basename(file, path.extname(file))] = require(`./${file}`));
}

module.exports = modules;

index.js

-svg-country-flags
 --png100px
   ---au.png
   ---au.png
 --index.js
 --CountryFlagByCode.js

Leí un archivo como este:

CountryFlagByCode.js

const context = require.context(''./png100px'', true, /.png$/);

const obj = {};
context.keys().forEach((key) => {
  const countryCode = key.split(''./'').pop() // remove the first 2 characters
    .substring(0, key.length - 6); // remove the file extension
  obj[countryCode] = context(key);
});

export default obj;

Answer 4

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)$/)
);

Answer 5

ACTUALIZACIÓN Parece que no entendí bien la pregunta. @Felix lo hizo bien, así que verifique su respuesta. El siguiente código funcionará solo en un entorno Nodejs.

Agregue un archivo index.js en la carpeta de images

import React from ''react'';
import countryFlags from ''./index'';

const CountryFlagByCode = (countryCode) => {
    return (
        <div>
          <img src={countryFlags[countryCode.toLowerCase()]} alt="country_flag" />
        </div>
      );
    };

export default CountryFlagByCode;

Esto le permitirá importar todo desde otro archivo y Wepback lo analizará y cargará los archivos necesarios.