Блог

Я новичок в реагировании и в настоящее время пытаюсь создать карточную игру. Я использовал 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.

Структура папок выглядит следующим образом:

структура папок

Буду признателен за любую помощь!