React 应用程序不会显示 PNG 徽标“404（未找到）”

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 开发服务器问题吗？

Answer 1

将您的状态更改为：

this.state = {
    imgSrc:  Logo1 
}

React 应用程序不会显示 PNG 徽标“404（未找到）”

React app won't display PNG logo '404 (Not Found)'

html

javascript

reactjs

webpack

webpack-dev-server