Question

我为预装图像编写了一个组件。每张图片都有精简版（道具previewUrl）和普通版（道具src）看来，一切都应该没问题，但事实并非如此！事件onload不起作用。 GET请求不会发生。我打破了主意，不知道哪里有错误。

以下代码的代码集https://codepen.io/fsdev/pen/bLWgoL

class Image extends React.Component {

    constructor(props){
        super(props);
        this.state = { src: null };
        this.preloadImage = this.preloadImage.bind(this);
    }
    componentWillMount(){
        const { src: bigImage, previewUrl } = this.props;
        this.setState({src: previewUrl});
        this.preloadImage(bigImage)
            .then(() => {
                console.log("Loaded");
                this.setState({src: bigImage});
            })
            .catch(e => console.error(e.message))
    }
    preloadImage(url){
        return new Promise((resolve, reject) => {
            const image = new Image();
            image.onload = resolve;
            image.onerror = reject;
            image.src = url;
        })
    }

    render(){
        const { src } = this.state;
        const { previewUrl, ...rest } = this.props;
        return(
            <img {...rest} src={src} />
        )
    }
}



class App extends React.Component {
  render(){ 
    return(

<Image src="http://res.cloudinary.com/playhs/image/upload/v1518304840/bsyjqxahzr8bmaxuvj04.png"
        previewUrl="http://res.cloudinary.com/playhs/image/upload/q_30/v1518304850/ztpj7gnqazk6ng2tzamk.jpg"
        />

    )
  }

}

ReactDOM.render(
  <App/>, document.body
)

谢谢

Answer 1

我是愚蠢的我的React组件称为Image 在这里

const image = new Image();

我在这里称我自己的组件:) lol

为什么预装图像不起作用？

1 个答案: