Question

所以这是我目前通过ES6在webpack中导入图像和图标的工作流程：

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

我觉得必须有一些方法可以动态导入特定目录中的所有文件，因为它们的名称是扩展名，然后根据需要使用这些文件。

任何人看到这样做了，或者对最好的方法有任何想法？

更新

使用选定的答案，我能够做到这一点：

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

我觉得必须有一些方法可以动态导入特定目录中的所有文件，因为它们的名称是扩展名，然后根据需要使用这些文件。

不在ES6中。 import和export的重点是依赖关系可以静态确定，即不执行代码。

但是既然您正在使用webpack，请查看require.context。您应该能够执行以下操作：

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

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

Answer 2

这很容易。您可以在require内使用render（静态方法，导入仅适用于动态文件）。如下例所示：

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

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

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

Answer 3

<强>更新好像我不太明白这个问题。 @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将解析它并加载所需的文件。

Answer 4

我有png国家标志的目录，名为au.png，nl.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;

Answer 5

解决此问题的实用方法：

students

Answer 6

工作示例：

<img src={require(`../../folder-path/${dynamic-filename}.png`).default} />

Answer 7

这是我在 Reactjs 中制作的功能组件，用于使用 webpack 文档和此处的一些答案简单地显示我的项目（与组件相同级别）中 media 文件夹中的所有图像。

import React from 'react';

const cache = {};

function importAll(r) {
    r.keys().forEach((key) => (cache[key] = r(key)));
}
// Note from the docs -> Warning: The arguments passed to require.context must be literals!
importAll(require.context("./media", false, /\.(png|jpe?g|svg)$/));

const images = Object.entries(cache).map(module => module[1].default);


const MediaPage = () => {
    return (
        <>
            <p>Media Page..</p>

            {images.map(image => (
                <img style={{width: 100}} src={image} />
            ))}
        </>
    );
}

export default MediaPage;

通过我加载图像的方式，从 cache 对象映射时文件名会丢失，但如果您需要它们，您可以直接使用 cache 对象，因为键是文件名。

// example with styles just for clarity
return (
    <>
        <p>Media Page..</p>

        {Object.entries(cache).map(module => {
            const image = module[1].default;
            const name = module[0].replace("./","");
            return (
                <div style={{float: 'left', padding: 10, margin: 10, border: '2px solid white' }}>
                    <img style={{width: 100, margin: 'auto', display: 'block'}} src={image} />
                    <p>{name}</p>
                </div>
            )
        })}
    </>
);

使用webpack从目录动态导入图像

7 个答案: