所以这是我目前通过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']} />
我觉得必须有一些方法动态导入特定目录中的所有文件,因为他们的名称没有扩展名,然后根据需要使用这些文件。
不在ES6中。 import
和export
的重点是可以静态地确定依赖关系,即不执行代码。
但是既然你正在使用webpack,请看看require.context
。您应该能够执行以下操作:
function importAll(r) {
return r.keys().map(r);
}
const images = importAll(require.context('./', false, /\.(png|jpe?g|svg)$/));
这很简单。您可以在require
中使用render
(静态方法,导入仅用于动态文件)。如下例所示:
render() {
const {
someProp,
} = this.props
const graphImage = require('./graph-' + anyVariable + '.png')
const tableImage = require('./table-' + anyVariable2 + '.png')
return (
<img src={graphImage}/>
)
}
更新似乎我不太明白这个问题。 @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;
这将允许您从另一个文件导入所有内容,Webpack将解析它并加载所需的文件。
我有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;
解决此问题的功能方法:
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)$/)
);