如果未加载主图像则显示虚拟图像-反应

Question

如果主图像由于任何原因未加载，我希望能够显示虚拟/后备图像。另一个问题是主映像本身未加载，甚至虚拟映像也未加载。我在状态下加载这些图像的方式可能存在问题I am getting a broken image

我的代码

import React, { Component } from 'react';
import './App.css';


class App extends Component {
  state = {
    src : 'https://imgur.com/a/drCvcQi',
    fallbacSrc : 'https://imgur.com/a/064EAbu',
    loaded: false,
    error: false
  }

  onImageLoad = () => {
    this.setState({
      loaded: true
    })
  }

  onImageError = () => {
    this.setState({
      error: true
    })
  }

  render() {
    const { src, fallbacSrc, loaded, error }= this.state;
    let imgSrc = (!error) ? src : fallbacSrc;
    return (
      <div>
        <img src={imgSrc} onLoad={this.onImageLoad} onError={this.onImageError} />
      </div>
    )
  }
}



export default App;

Answer 1

您确定这些链接吗？您能否通过访问Imgur并检查代码来尝试从img标记中获取链接。您应该有类似“http://i.imgur.com/*******。jpg”

的内容