In the React project, many import are used to insert pictures. How can this be simplified?

insert a large number of pictures into the project, how to simplify

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

this is needed in 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
Feb.27,2021

Hello, here's how I do it:

clipboard.png

this.state.src is my picture name


require.context webpackapi

ides/dependency-management/" rel=" nofollow noreferrer "> https://doc.webpack-china.org.


write a js: index.js

under the image folder.
import * as images from '../assets/images'; //index.js


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

circleValue can be optimized separately.

Menu