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

Я написал простой компонент, который принимает в себя два обязательных пропса - 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
)
  • Вопрос задан
  • 2465 просмотров
Решения вопроса 1
kn1ght_t
@kn1ght_t
return new Promise((resolve, reject) => {
            const image = document.createElement('img');
            image.onload = resolve;
            image.onerror = reject;
            image.src = url;
        });


вот так сработает =)
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы