React应用程序不会显示PNG徽标'404（Not Found）'

Question

我试图通过改变图像本身与另一种颜色之一来改变我的页面上的徽标。我已经设置了this.handleMouseOver和..Out，它似乎在工作，但是我在控制台GET http://localhost:8080/[object%20Object] 404 (Not Found)中遇到此错误，并且徽标未显示。这是我的组件：

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>  
     ); 
    } 
} 

为什么我得到这个错误？这是一个Webpack Dev Server的问题吗？

Answer 1

你的状态改为：

this.state = { 
    imgSrc: Logo1 
}