[reactjs] 웹팩을 사용하여 디렉토리에서 동적으로 이미지 가져 오기

Question 1

따라서 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} />

이것은 빨리 지저분해진다. 내가 원하는 것은 다음과 같습니다.

import * from './images'

<img src={doggy} />
<img src={turtle} />

특정 디렉토리의 모든 파일을 이름 sans 확장자로 동적으로 가져온 다음 필요에 따라 해당 파일을 사용할 수있는 방법이 있어야한다고 생각합니다.

이 일을 본 사람이 있거나 최선의 방법에 대한 생각이 있습니까?

최신 정보:

선택한 답변을 사용하여 다음을 수행 할 수있었습니다.

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']} />

Question 2

특정 디렉토리의 모든 파일을 이름 sans 확장자로 동적으로 가져온 다음 필요에 따라 해당 파일을 사용할 수있는 방법이 있어야한다고 생각합니다.

ES6에는 없습니다. 의 요점 import과 export그 종속성을 판단 할 수 있습니다 정적 즉, 코드를 실행하지 않고,.

그러나 웹팩을 사용하고 있으므로 require.context. 다음을 수행 할 수 있어야합니다.

function importAll(r) {
  return r.keys().map(r);
}

const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));

Question 3

그것은 간단합니다. 당신은 사용할 수 있습니다 require내부 (정적 방법, 수입 그냥 동적 파일입니다) render. 아래 예와 같이 :

render() {
    const {
      someProp,
    } = this.props

    const graphImage = require('./graph-' + anyVariable + '.png')
    const tableImage = require('./table-' + anyVariable2 + '.png')

    return (
    <img src={graphImage}/>
    )
}

Question 4

au.png, nl.png 등과 같은 이름의 png 국가 플래그 디렉토리가 있습니다. 그래서 다음과 같이합니다.

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

index.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;

다음과 같은 파일을 읽었습니다.

CountryFlagByCode.js

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;

Question 5

이 문제를 해결하기위한 기능적 접근 방식 :

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

Question 6

업데이트
질문을 잘 이해하지 못한 것 같습니다. @Felix가 맞았으므로 대답을 확인하십시오. 다음 코드는 Nodejs 환경에서만 작동합니다.

폴더에 index.js파일 추가images

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;

이렇게하면 다른 파일에서 모든 것을 가져올 수 있으며 Wepback은이를 구문 분석하고 필요한 파일을로드합니다.