CODEWITHSUNDEEP
javascriptreactjswebpack
alvin lal
alvin lal

Reputation: 129

React App not showing locally imported images

I am trying to make a rock paper scissors game that we can play against computer,i have a div that shows both the user's choice and computer's choice,but only the image of user is showing and image of computer is only showing alt text.both user and computer choice image is stored localy. I am using webpack for production

App.js:- 

import React,{Component} from "react"
//import {BrowserRouter} from "react-router-dom"
import Navbar from "./components/Navbar"
import Scoreboard from "./components/ScoreBoard"
import Result from "./components/Result"


class App extends Component{
    render(){
        return(
            <div className="app">
                <Navbar />
                <Scoreboard />
                <Result />
            </div>

        )
    }
}

export default App

Result.js:- 

import React from "react"
import Paper from "./images/paper.png"
import Scissor from "./images/scissors.png"
import Rock from "./images/rock.png"

class Result extends React.Component{
    state={
        result_message:"WELCOME",
        user_result_image:Paper,
        comp_result_image:Rock,

    }

    render(){
        return(
            <div className="result">
                <div className="elem1" id="user">
                    <p>User</p>
                    <img src={this.state.user_result_image} alt="resultimage" id="user-img"/>
                </div>
        <div className="elem1" id="welcome"><p id="user-result-image">{this.state.result_message}</p></div>
           <div className="elem1" id="computer">
               <p>Computer</p>
               <img scr={this.state.comp_result_image} alt="compimage" id="comp-img"/>
           </div>
         </div>
        )
    }
}

export default Result

output

Upvotes: 1

Views: 66

Answers (1)

Mart Macion
Mart Macion

Reputation: 106

Found it you just typed it wrong.

<img src={this.state.comp_result_image} alt="compimage" id="comp-img"/>
       </div>

change scr to src

Upvotes: 2

Related Questions