Image onError Обработка в React - PullRequest
Новая
       20

Image onError Обработка в React

0 голосов
/ 26 октября 2018

Я пытаюсь получить maxresdefault нескольких миниатюр YouTube.У некоторых видео на YouTube просто нет уменьшенного изображения в высоком разрешении, поэтому я хочу уловить это с помощью onError для элемента img.По какой-то причине моя функция не срабатывает, когда я получаю ошибку 404 img.Есть идеи?Заранее спасибо. 

class FeaturedVideo extends Component<Props> {
  addDefaultSrc = (e) => {
    e.target.src = this.props.background.replace("maxresdefault", "hqdefault")
  }

  renderVideo = (props) => (
    <div
      style={{
        width: "100%",
        height: "100%",
        backgroundSize: "contain",
      }}
      className="featured-community-video"
    >
      <img onError={this.addDefaultSrc} src={props.background} alt="" />
      <div className="featured-community-video-title">
        <h2 style={{ fontSize: "0.8em" }}>WATCH</h2>
        <h1 style={{ fontSize: props.titleFontSize }}>{props.title}</h1>
      </div>
    </div>
  )

  render() {
    return (
      <div
        key={this.props.postId}
        style={{
          width: this.props.width,
          height: "50%",
        }}
        className="featured-community-video-container"
      >
        <Link to={routeCodes.POST_DETAILS(this.props.postId)}>
          {this.renderVideo(this.props)}
        </Link>
      </div>
    )
  }
}

1 Ответ

0 голосов
/ 26 октября 2018

Для этого я бы предложил визуализировать <img /> в зависимости от состояния вашего <FeatureVideo/> компонента.

Например, вы можете создать объект Image, попытаться загрузить * 1006.* изображение и тем самым надежно определить, не удается ли загрузить изображение.В случае успешной или неудачной загрузки изображений вы затем setState() добавили бы к <FeaturedVideo/> свой компонент с соответствующим значением background, которое вместо этого использовалось бы для визуализации фактического элемента <img/>: 

class FeaturedVideo extends Component<Props> {

  componentDidMount() {

    if(this.props.background) {

      // When component mounts, create an image object and attempt to load background
      fetch(this.props.background).then(response => {
         if(response.ok) {
           // On success, set the background state from background
           // prop
           this.setState({ background : this.props.background })
         } else {        
           // On failure to load, set the "default" background state
           this.setState({ background : this.props.background.replace("maxresdefault", "hqdefault") })
         }
      });
    }
  }

  // Update the function signature to be class method to make state access eaiser
  renderVideo(props) {

    return <div
      style={{
        width: "100%",
        height: "100%",
        backgroundSize: "contain",
      }}
      className="featured-community-video">

      {/* Update image src to come from state */}

      <img src={this.state.background} alt="" />
      <div className="featured-community-video-title">
        <h2 style={{ fontSize: "0.8em" }}>WATCH</h2>
        <h1 style={{ fontSize: props.titleFontSize }}>{props.title}</h1>
      </div>
    </div>
  }

  render() {
    return (
      <div
        key={this.props.postId}
        style={{
          width: this.props.width,
          height: "50%",
        }}
        className="featured-community-video-container"
      >
        <Link to={routeCodes.POST_DETAILS(this.props.postId)}>
          {this.renderVideo(this.props)}
        </Link>
      </div>
    )
  }
}

Надеюсь, это поможет!

...