Почему не срабатывает событие onload у img?

Question

[Shaks]

Я написал простой компонент, который принимает в себя два обязательных пропса - src и previewUrl, где previewUrl - это легкая версия картинки.
Задача компонента, отобразить легкую версию картинки, а когда загрузится основная - тогда заменить у img ссылку. Казалось бы идея простая и логичная, но ничего не работает :) А именно - не происходит GET запрос на картинку, и соответственно не срабатывает onload а почему я хз.
Помогите разобраться. Вот codepen задачи https://codepen.io/fsdev/pen/bLWgoL

class Image extends React.Component{

    static preloadImage(url){
        return new Promise((resolve, reject) => {
            const image = new Image();
            image.onload = resolve;
            image.onerror = reject;
            image.src = url
        })
    }

    constructor(){
        super();
        this.state = {
            src: null
        };
    }

    componentWillMount(){
        const { src: bigImage, previewUrl } = this.props;
        this.setState({src: previewUrl});

        Image.preloadImage(bigImage)
            .then(() => {
                console.log("Loaded");
                this.setState({src: bigImage})
            })
            .catch(e => console.error(e.message))
    }

    render(){
        const { src } = this.state;
        const { previewUrl, ...rest } = this.props; //eslint-disable-line

        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

[kn1ght_t]

return new Promise((resolve, reject) => {
            const image = document.createElement('img');
            image.onload = resolve;
            image.onerror = reject;
            image.src = url;
        });

вот так сработает =)

Comments

[Shaks]

красавчик. Я 2 дня себе мозг выношу :)

[kn1ght_t]

да я с первого взгляда тоже не сразу понял) аж подписался на вопрос)

[Антон Спирин]

Странно, что никто не заметил, что в коде стандартный конструктор Image переопределен React компонентом. Причина проблемы именно в этом.

[kn1ght_t]

Антон Спирин, все-таки не зря подписался) 5 за внимательность)

[Shaks]

Антон Спирин
Ты прав. чертовски прав. ) напиши ответ, я отмечу решением.