Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/420.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript React应用程序不显示本地导入的图像_Javascript_Reactjs_Webpack - Fatal编程技术网

Javascript React应用程序不显示本地导入的图像

Javascript React应用程序不显示本地导入的图像,javascript,reactjs,webpack,Javascript,Reactjs,Webpack,我正在尝试做一个石头剪刀游戏,我们可以玩电脑,我有一个div,显示用户的选择和电脑的选择,但只有用户的图像显示,电脑的图像只显示alt文本。用户和电脑选择的图像都存储在本地。 我正在使用网页制作 附录js:- import React,{Component} from "react" //import {BrowserRouter} from "react-router-dom" import Navbar from "./components/Navbar" import Scoreboard

我正在尝试做一个石头剪刀游戏,我们可以玩电脑,我有一个div,显示用户的选择和电脑的选择,但只有用户的图像显示,电脑的图像只显示alt文本。用户和电脑选择的图像都存储在本地。 我正在使用网页制作

附录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
import React,{Component}来自“React”
//从“react router dom”导入{BrowserRouter}
从“/components/Navbar”导入导航栏
从“/components/Scoreboard”导入记分板
从“/components/Result”导入结果
类应用程序扩展组件{
render(){
返回(
)
}
}
导出默认应用程序
结果:

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
从“React”导入React
从“/images/Paper.png”导入纸张
从“/images/Scissor.png”导入剪刀
从“/images/Rock.png”导入岩石
类结果扩展了React.Component{
陈述={
结果信息:“欢迎”,
用户\u结果\u图像:纸张,
合成结果图像:岩石,
}
render(){
返回(
使用者

{this.state.result\u message}

计算机

) } } 导出默认结果

找到了,你只是打错了

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

scr
更改为
src