javascript - (React.js)使用Webpack从一个文件夹中导入多个图像后损坏的图像

Question

我是 React 的新手，目前正在尝试构建一个纸牌游戏。我使用 webpack importAll(r) 来检索扑克牌的图像。但是通过检查属性，图像似乎损坏了： 查看

这是 Card.js 的代码：

const images = importAll(require.context('./Asset', false, /\.png$/)); 
    console.log(images);

const Card = () => {
    return (
        <div>
            <img src={images['NAP-01_Back.png']} alt = "image" /> 
        </div>
    )
}

function importAll(r) {
    let images = {};
    r.keys().map((item) => { images[item.replace('./', '')] = r(item); });
    return images;

}

在 App.js 中，我只是将<Card/>其放入 div 中。

文件夹结构如下：

文件夹结构

将不胜感激任何帮助！

标签： javascriptreactjswebpack