React项目中，使用很多import插入图片，请问这个如何简化？

Question

在项目里面插入大量的图片，请问如何简化

import React from 'react';
import ReactDOM from 'react-dom';
import './assets/styles/index.less';
import A0 from './assets/images/A0.png';
import A1 from './assets/images/A1.png';
import A2 from './assets/images/A2.png';
import B0 from './assets/images/B0.png';
import B1 from './assets/images/B1.png';
import B2 from './assets/images/B2.png';
import C0 from './assets/images/C0.png';
import C1 from './assets/images/C1.png';
import C2 from './assets/images/C2.png';
import D0 from './assets/images/D0.png';
import D1 from './assets/images/D1.png';
import D2 from './assets/images/D2.png';
import E0 from './assets/images/E0.png';
import E1 from './assets/images/E1.png';
import E2 from './assets/images/E2.png';
import F0 from './assets/images/F0.png';
import F1 from './assets/images/F1.png';
import F2 from './assets/images/F2.png';

这是在render里面需要用的

    render() {

        const _self = this;

        //console.log('_self.props.styleSet =', _self.props.styleSet)
        let divStyle = {
            //
        }


        let circleApplication = []
        let circleValue = [0, 0, 0, 0, 0, 0]
        if(this.state.circle.length != 0){
            this.state.circle.map(function(item, index){
                circleApplication[index] = item['application'];
                circleValue[index] = item['value'];
            })
        }

        console.log('circleApplication =', circleApplication)
        console.log('circleValue =', circleValue)

        let aImage = circleValue[0] !==  0 ? circleValue[0] !==  1 ?A2:A1:A0
        let bImage = circleValue[1] !==  0 ? circleValue[1] !==  1 ?B2:B1:B0
        let cImage = circleValue[2] !==  0 ? circleValue[2] !==  1 ?C2:C1:C0
        let dImage = circleValue[3] !==  0 ? circleValue[3] !==  1 ?D2:D1:D0
        let eImage = circleValue[4] !==  0 ? circleValue[4] !==  1 ?E2:E1:E0
        let fImage = circleValue[5] !==  0 ? circleValue[5] !==  1 ?F2:F1:F0

Answer 1

你好，我是这样实现的：

this.state.src 是我的图片名称

Answer 2

require.context 可以看看webpack的这个api

https://doc.webpack-china.org...

Answer 3

在image文件夹下写一个js:index.js

export {default as A0} from './assets/images/A0.png';
export {default as A1} from './assets/images/A1.png';
 //......
export {default as F2} from './assets/images/F2.png';

在render的js中：

import * as images from '../assets/images'; //不需要指定那个index.js


let aImage = circleValue[0] !==  0 ? circleValue[0] !==  1 ? images['A2']: images['A1'] : images['A0`]

circleValue可以另作优化。