Как проверить размеры картинки до ее отрисовки в dom?

Question

[Fierfoxik]

Необходимо получать из redux хранилища урл картинки и отрисовывать ее в dom дереве если она проходит по высоте и ширине.
У меня почти получилось сделать близкий по смыслу функционал , но только проверка происходит только после того как картинка отрисована в dom, а затем если она не проходит по условию удаляю ее.
Как можно проверить размеры картинки до того как она будет отрисована в dom?

drawImg(){
        const {imagePreviewUrl, file} = this.state;
        if (imagePreviewUrl) {
           return <div key="162" className="imgPreview">
               <img  src={imagePreviewUrl} onLoad={this.CheckImg} />
           </div>
        }
    }

    CheckImg(e){
        if(e.target.width==140 || e.target.height==205){
            alert('Обложка успешно загружена')
            e.target.parentNode.classList.add('is--checked')
        }else{
            e.target.parentNode.classList.remove('is--checked')
            e.target.src = '';
            alert('Обложка должна быть 140х205');
        }
    }

Comments

[Kovalsky]

А нельзя на сервере эту магию с размерами производить? К тому же размеры абсолютные...

Если нет, то можно картинку сначала загружать через Image, потом рендерить если она подходит.

[Fierfoxik]

Никита Полевой: Увы тут тестовое задание без бека, как вариант я сделал еще костыль что загружается сначала картинка с классом для абсолютного позиционирования и невидимостью , ну и если она проходит то мы убираем его.

Answer 1

[Никита Гущин]

После того, как компонент будет добавлен в DOM - берем src из props и создаем новый DOM-элемент img, ставим обработчик onLoad и загружаем картинку. Затем проверяем размеры и устанавливаем стейт

class Cover extends Component { 
   state = {
     loaded: false,
     width: 0,
     height: 0,
   }

   componentDidMount() {
     const img = document.createElement('img')

     img.onload = e => {
       console.log('image loaded', img.width, img.height)
       this.setState({ loaded: true, width: img.width, height: img.height })
     }

     img.src = this.props.src
   }

  renderLoading() {
    return <div>loading... </div>
  }
  
  renderLoaded() {
    const { width, height } = this.state
    const isFits = width === 140 && height === 205
    return isFits
      ? <div>обложка успешно установлена</div>
      : <div>Обложка должна быть 140х205</div>
  }

   render() {
       return this.state.loaded ? this.renderLoaded() : this.renderLoading()
   }
}

Answer 2

[davidnum95]

Собственно, как то так