Javascript REACT找不到图像的模块

尝试将图像加载到react中，这只是一个测试，最终我会将其全部保存在一个数组中，并将其保存为数据以供切换。然而，我无法得到图像加载我不断得到找不到模块，我已经安装了url和文件加载器，我已经尝试把图像文件夹放在不同的位置，它目前在src。我可以从CSS文件中加载相同的图像作为背景

import React, { useState } from 'react';
import Scoreboard from './Scoreboard';
import './CSS/Game.css';
import Data from './Data';
import geeAtherton from '../Images/gee-atherton.png';

const Game = (props) => {
    const riders = Data;
    const [score, setScore] = useState(0);
    const [highScore, setHighScore] = useState(0);
    const [cardOne, setCardOne] = useState(riders[0]);
    const [cardTwo, setCardTwo] = useState(riders[1]);
    const [cardThree, setCardThree] = useState(riders[2]);


    /* Plays on click and checks answer
    NEED TO REQUIRE SCORE UPDATE
    */
    function playRound(choice){
        console.log(choice)
        if (!riders[choice].used){
            setScore(score +1);
            riders[choice].used = true
        }else{
            alert('loser')
            newGame();
        }
        if (score === 4){
            alert('Jeez Louise you win!')
            newGame();
        }
        else {
            setCards();
        }
    }

    /*checks to ensure at least one card hasn't been picked
    and then sets the new card values*/
    function setCards(){
        shuffle(riders)
        if (riders[0].used === true && riders[1].used === true && riders[2].used === true){
            setCards();
        }
        else {
            setCardOne(riders[0]);
            setCardTwo(riders[1]);
            setCardThree(riders[2]);
        }
    }

    /* Resets the game*/
    function newGame(){
        for(let i = 0; i < riders.length; i++){
            if (riders[i].used === true){
                riders[i].used = false;
            }
        }
        if (score > highScore){
            setHighScore(score);
        }
        setScore(0);
        setCards();
    }

    /* Shuffle the array */
    function shuffle(array){
        var currentIndex = array.length, temporaryValue, randomIndex;
        while (0 !== currentIndex) {
            randomIndex = Math.floor(Math.random() * currentIndex);
            currentIndex -= 1;
            temporaryValue = array[currentIndex];
            array[currentIndex] = array[randomIndex];
            array[randomIndex] = temporaryValue;
            }
    }

    return (
        <div>
        <Scoreboard score = {score} 
                    highScore = {highScore}/>
        <div id = "game-container">
            <div className = "card" onClick = {() => playRound(0)}>
            <img src = {require(geeAtherton)} alt ={cardOne.name}></img></div>
            <div className = "card" onClick = {() => playRound(1)}>{cardTwo.id}</div>
            <div className = "card" onClick = {() => playRound(2)}>{cardThree.id}</div>
        </div>
        </div>
    )
}

export default Game

import React，{useState}来自“React”；
从“./Scoreboard”导入记分板；
导入“./CSS/Game.CSS”；
从“./Data”导入数据；
从“../Images/gee atherton.png”导入geeAtherton；
康斯特游戏=（道具）=>{
常数=数据；
const[score，setScore]=useState（0）；
const[highScore，setHighScore]=useState（0）；
const[cardOne，setCardOne]=useState（骑士[0]）；
const[cardtower，setcardtower]=useState（骑手[1]）；
const[cardtree，setcardtree]=useState（骑手[2]）；
/*单击播放并检查答案
需要更新分数吗
*/
功能游戏厅（选择）{
console.log（选项）
如果（！riders[choice]。已使用）{
核心得分（得分+1）；
骑手[choice].used=true
}否则{
警报（“失败者”）
新游戏（）；
}
如果（分数=4）{
警惕（“天哪，路易丝，你赢了！”）
新游戏（）；
}
否则{
setCards（）；
}
}
/*检查以确保至少有一张卡未被取走
然后设置新卡的值*/
函数setCards（）{
洗牌（骑手）
如果（附加条款[0]。使用===true&&riders[1]。使用===true&&riders[2]。使用===true）{
setCards（）；
}
否则{
setCardOne（骑手[0]）；
setCardTwo（骑手[1]）；
setCardThree（骑手[2]）；
}
}
/*重置游戏*/
函数newGame（）{
for（设i=0；i高分）{
setHighScore（分数）；
}
设置核心（0）；
setCards（）；
}
/*洗牌*/
函数洗牌（数组）{
var currentIndex=array.length，temporaryValue，randomIndex；
而（0！==currentIndex）{
randomIndex=Math.floor（Math.random（）*currentIndex）；
currentIndex-=1；
临时值=数组[currentIndex]；
数组[currentIndex]=数组[randomIndex]；
数组[randomIndex]=临时值；
}
}
返回(
游戏回合（0）}>
playRound（1）}>{cardtou.id}
playRound（2）}>{cardtree.id}
)
}
导出默认游戏
您不需要在
img
标签中使用
require


您不需要在
img
标签中使用
require

我会在我的公共文件中创建一个名为images的文件夹
public/images
我会将
gee-atherton.png
保存在那里
public/images/gee-atherton.png
然后通过它的url调用它

我会在我的公共文件中创建一个名为images的文件夹
public/images
我会将
gee-atherton.png
保存在那里
public/images/gee-atherton.png
然后通过它的url调用它