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 
}

React app不会显示PNG徽标'404（Not Found）'

1 个答案: