如何在 ReactJS 中導入多張圖片

Question

我有這樣的東西。

我想用更短的代碼導入多張圖片。

我嘗試使用這樣的模板字符串

但似乎不需要顯示我的圖像。

Answer 1

您可以使用索引文件重新導出文件夾中的所有圖像

資產/圖像/森林/index.js

import layer0001 from './Layer_0001.png';
import layer0002 from './Layer_0002.png';
import layer0003 from './Layer_0003.png';

export { layer0001, layer0002, layer0003 };

並將它們作為命名導入導入

import { layer0001, layer0002, layer0003 } from 'assets/images/forest';

或導入所有內容

import * as forest from 'assets/images/forest';

它允許你做一個動態的 URL 像

let layer = 'layer001';

backgroundImage: `url(${forest[layer]})`