React App не показывает локально импортированные изображения

Question

Я пытаюсь сделать игру ножницами из каменной бумаги, в которую мы можем играть против компьютера, у меня есть div, который показывает и выбор пользователя, и выбор компьютера, но только изображение пользователя показывает, а изображение компьютера показывает только alt text.both изображение пользователя и компьютера хранится локально. Я использую webpack для производства

Приложение. 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

Результат. 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

Answer 1

Нашли, что вы только что набрали неправильно.

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

измените scr на src