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 
}