Javascript 在React With Webpack中动态导入

因此，我需要将不同的图标加载到wwwroot文件夹中，以便传递回的图标或url可以使用react项目中的图标。这变得很复杂，因为每个allegen有三个不同的图标，需要动态导入，因为有些图标可能不存在，不值得加载

我想知道是否有一个体面的方式来做我在下面做的事情，而不需要一个基于文件和文件夹名的大规模开关语句来从这个帮助文件传回所需的图标。我曾尝试在注释框中动态加载图标，但迄今为止没有成功

当试图通过注释代码导入时，我得到了错误

希望听到， 提前谢谢

从“../../../assets/img/allengins/celery/cellery_amber_200x200.png”导入芹菜琥珀；
从“../../../assets/img/过敏原/芹菜/芹菜红”200x200.png”导入芹菜红；
从“../../../assets/img/过敏原/芹菜/芹菜_grey_200x200.png”导入芹菜灰；
从“../../../assets/img/allengins/crapacens/crapacena_amber_200x200.png”导入甲壳类动物成员；
从“../../../assets/img/allergens/crapacens/crapacena_red_200x200.png”导入甲壳类动物；
从“../../../assets/img/过敏原/crapacens/crapacena_grey_200x200.png”导入甲壳类动物灰色；
从“../../../assets/img/过敏原/eggs/eggs_amber_200x200.png”导入EggsAmber；
从“../../../assets/img/过敏原/eggs/eggs_red_200x200.png”导入EggsRed；
从“../../../assets/img/过敏原/eggs/eggs_grey_200x200.png”导入EggsGrey；
从“../../../assets/img/过敏原/fish/fish_amber_200x200.png”导入FishAmber；
从“../../../assets/img/过敏原/fish/fish_red_200x200.png”导入FishRed；
从“../../../assets/img/过敏原/fish/fish_grey_200x200.png”导入鱼灰；
从“../../../assets/img/过敏原/lupin/lupin_amber_200x200.png”导入LupinAmber；
从“../../../assets/img/过敏原/lupin/lupin_red_200x200.png”导入LupinRed；
从“../../../assets/img/过敏原/lupin/lupin_grey_200x200.png”导入LupinGrey；
从“../../../assets/img/过敏原/milk/milk_amber_200x200.png”导入MilkAmber；
从“../../../assets/img/过敏原/milk/milk_red_200x200.png”导入牛奶；
从“../../../assets/img/过敏原/milk/milk_grey_200x200.png”导入MilkGrey；
从“../../../assets/img/过敏原/molluscs/molluscs_amber_200x200.png”导入软体动物Samber；
从“../../../assets/img/过敏原/molluscs/molluscs_red_200x200.png”导入软体动物；
从“../../../assets/img/过敏原/molluscs/molluscs_grey_200x200.png”导入软体动物grey；
从“../../../assets/img/过敏原/芥末/芥末”amber_200x200.png”导入MustardAmber；
从“../../../assets/img/过敏原/芥末/芥末红200x200.png”导入MustardRed；
从“../../../assets/img/过敏原/芥末/芥末灰200x200.png”导入MustardGrey；
从“../../../assets/img/allergins/peano/peano_amber_200x200.png”导入PeanutAmber；
从“../../../assets/img/过敏原/花生/花生红200x200.png”进口花生；
从“../../../assets/img/过敏原/花生/花生灰200x200.png”进口花生灰；
从“../../../assets/img/过敏原/sesame/sesame_amber_200x200.png”导入Sesamember；
从“../../../assets/img/过敏原/sesame/sesame_red_200x200.png”导入Sesamed；
从“../../../assets/img/过敏原/sesame/sesame_grey_200x200.png”导入芝麻灰；
从“../../../assets/img/过敏原/soya/soya_amber_200x200.png”导入大豆编号；
从“../../../assets/img/过敏原/soya/soya_red_200x200.png”进口大豆；
从“../../../assets/img/过敏原/soya/soya_grey_200x200.png”进口SoyaGray；
从“../../../assets/img/allergins/sulfurdioxide/sulfurdioxide_amber_200x200.png”进口SuplphurDioxideAmber；
从“../../../assets/img/allergins/sulfurdioxide/sulfurdioxide_red_200x200.png”进口SuplphurDioxided；
从“../../../assets/img/allergins/sulfurdioxide/sulfurdioxide_grey_200x200.png”进口SuplphurDioxideGrey；
从“../../../assets/img/过敏原/treenut/treenut_amber_200x200.png”导入TreenutAmber；
从“../../../assets/img/过敏原/treenut/treenut_red_200x200.png”导入treenut；
从“../../../assets/img/过敏原/treenut/treenut_grey_200x200.png”导入TreenutGrey；
从“../../../assets/img/过敏原/wheat/wheat_amber_200x200.png”导入wheatanber；
从“../../../assets/img/过敏原/wheat/wheat_red_200x200.png”进口小麦；
从“../../../assets/img/过敏原/wheat/wheat_grey_200x200.png”进口小麦灰；
常量fetchComp=（名称、状态）=>{
//这是因为它直接将图标传递回原处
返回TreenutGrey；
};
//常量fetchComp=（名称、状态）=>{
//导入（`../../../assets/img/过敏原/${name}/${name}{status}{u 200x200.png`）
//然后（（）=>console.log（'Loaded'），（err）=>console.log（'Error'，err））；
//返回`../../../assets/img/allergens/${name}/${name}{status}{u 200x200.png`；
// };
const getStatusIcon=（名称、状态）=>{
开关（状态）{
案例“包含”：
返回fetchComp（名称“red”）；
“可能包含”一案：
返回fetchComp（名称“琥珀色”）；
“不包含”案例：
返回fetchComp（名称“灰色”）；
案例“未提供”：
返回fetchComp（名称“灰色”）；
违约：
返回fetchComp（名称“灰色”）；
}
};
const findallergincon=（{name，status}）=>{
const nametower=name.toLowerCase（）；
开关（nameToLower）{
“山核桃”一案：
返回getStatusIcon（'treenut'，状态）；
违约：
返回getStatusIcon（nameToLower，status）；
}
};
导出默认findAllergenIcon；