Javascript React应用程序赢得';t显示PNG徽标';404(未找到)和#x27;

Javascript React应用程序赢得';t显示PNG徽标';404(未找到)和#x27;,javascript,html,reactjs,webpack,webpack-dev-server,Javascript,Html,Reactjs,Webpack,Webpack Dev Server,我试图让我的页面上的一个徽标通过使用另一种颜色来改变图像本身的颜色。我已经设置了这个.handleMouseOver和.Out并且它似乎正在工作,无论我在控制台get中遇到这个错误http://localhost:8080/[object%20Object]404(未找到)且徽标不显示。这是我的组件: import React, { Component } from 'react'; import Woods from './woods.jpeg'; import Logo1 from './w

我试图让我的页面上的一个徽标通过使用另一种颜色来改变图像本身的颜色。我已经设置了
这个.handleMouseOver
.Out
并且它似乎正在工作,无论我在控制台
get中遇到这个错误http://localhost:8080/[object%20Object]404(未找到)
且徽标不显示。这是我的组件:

import React, { Component } from 'react';
import Woods from './woods.jpeg';
import Logo1 from './whitestar.png';
import Logo2 from './orangestar.png';

export default class Splash extends Component {
    constructor(props) {
        super(props);
        this.state = {
            imgSrc: { Logo1 } 
            //this.toggleShowHome = this.toggleShowHome.bind(this);
        }
        this.handleMouseOver = this.handleMouseOver.bind(this);
        this.handleMouseOut = this.handleMouseOut.bind(this);
    }

    toggleShowHome(property){
        this.setState((prevState)=>({[property]:!prevState[property]}));
        this.props.triggerClickOnParent();

     }

    handleMouseOver() {
        this.setState({
            imgSrc: { Logo2 }
        });
    }

    handleMouseOut() {
        this.setState({
            imgSrc: { Logo1 }
        });
    }

    render() {
        return(
            <div id='Splashwrapper'>
                <img src={Woods}></img>
                <img id='logoc' onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} src={this.state.imgSrc} onClick={this.toggleShowHome.bind(this,'showSquareOne')}></img>
            </div>    
        );  
    }
}
import React,{Component}来自'React';
从“/Woods.jpeg”导入木材;
从“/whitestar.png”导入Logo1;
从“/orangestar.png”导入Logo2;
导出默认类Splash扩展组件{
建造师(道具){
超级(道具);
此.state={
imgSrc:{Logo1}
//this.toggleShowHome=this.toggleShowHome.bind(this);
}
this.handleMouseOver=this.handleMouseOver.bind(this);
this.handleMouseOut=this.handleMouseOut.bind(this);
}
切换ShowHome(属性){
this.setState((prevState)=>({[property]:!prevState[property]}));
this.props.triggerClickOnParent();
}
handleMouseOver(){
这是我的国家({
imgSrc:{Logo2}
});
}
handleMouseOut(){
这是我的国家({
imgSrc:{Logo1}
});
}
render(){
返回(
);  
}
}
为什么我会犯这个错误?这是网页包开发服务器问题吗?

将您的状态更改为:

this.state = {
    imgSrc:  Logo1 
}