CODEWITHSUNDEEP
javascriptreactjs
Whisky-Toad
Whisky-Toad

Reputation: 125

REACT Cannot find module for images

Trying to load images into react, this is just a test eventually I'll have it all in an array thats saved as Data for switching about. However I can't get the image to load I constantly get cannot find module, I've got url and file loader installed, I've tried placing the images folder in various locations, its currently in src. I can get the same image to load from my CSS file for a background.

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

Upvotes: 0

Views: 1274

Answers (2)

Javi
Javi

Reputation: 493

I would create in my public file a folder called images. public/images I would save gee-atherton.png in there public/images/gee-atherton.png and then call it by its url.

<img src='/images/gee-atherton.png' alt={cardOne.name}></img>

Upvotes: 0

michael
michael

Reputation: 4173

You don't need to use require in img tag.

 <img src = {geeAtherton} alt ={cardOne.name}></img>

Upvotes: 2

Related Questions