Nhập động hình ảnh từ một thư mục bằng cách sử dụng webpack

Vì vậy, đây là quy trình làm việc hiện tại của tôi để nhập hình ảnh và biểu tượng trong webpack qua 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} />

Điều này trở nên lộn xộn nhanh chóng. Đây là những gì tôi muốn:

import * from './images'

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

Tôi cảm thấy như phải có một số cách để nhập động tất cả các tệp từ một thư mục cụ thể dưới dạng phần mở rộng không có tên của chúng, và sau đó sử dụng các tệp đó nếu cần.

Bất cứ ai đã thấy điều này được thực hiện, hoặc có bất kỳ suy nghĩ về cách tốt nhất để thực hiện nó?

CẬP NHẬT:

Sử dụng câu trả lời đã chọn, tôi có thể làm điều này:

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

Tôi cảm thấy như phải có một số cách để nhập động tất cả các tệp từ một thư mục cụ thể dưới dạng phần mở rộng không có tên của chúng, và sau đó sử dụng các tệp đó nếu cần.

Không có trong ES6. Toàn bộ điểm của importvà exportlà các phụ thuộc có thể được xác định tĩnh , tức là không cần thực thi mã.

Nhưng vì bạn đang sử dụng webpack, hãy xem require.context. Bạn có thể làm như sau:

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

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

Dễ thôi. Bạn có thể sử dụng require(một phương thức tĩnh, nhập chỉ dành cho các tệp động) bên trong render. Như ví dụ dưới đây:

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

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

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

Tôi có thư mục cờ nước png có tên như au.png, nl.png, v.v. Vì vậy, tôi có:

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

Tôi đọc một tệp như thế này:

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;

Một cách tiếp cận chức năng để giải quyết vấn đề này:

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

CẬP NHẬT Có vẻ như tôi không hiểu rõ câu hỏi. @Felix hiểu đúng vì vậy hãy kiểm tra câu trả lời của anh ấy. Đoạn mã sau sẽ chỉ hoạt động trong môi trường Nodejs.

Thêm một index.jstệp trong imagesthư mục

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;

Điều này sẽ cho phép bạn nhập mọi thứ từ một tệp khác và Wepback sẽ phân tích cú pháp nó và tải các tệp cần thiết.