Question

你能否告诉我如何替换src图像，同时列出反应？我有一个列表，其中有一个图像和它的标题。当图片不存在时，我想在src标记中交换img个网址。如果服务器上存在图片，那么它就没问题了 - 如果没有 - 我想将src网址替换为此http://punemirror.indiatimes.com/photo/55813567.cms。

这是我的代码 https://codesandbox.io/s/KOrGKp3B8

我试过这样：有检测图像是否存在的功能。但我将如何使用此功能做出反应？

  imageExists(url, callback) {
            var img = new Image();
            img.onload = function () {
                callback(true);
            };
            img.onerror = function () {
                callback(false);
            };
            img.src = url;
        }

Answer 1

您可以创建一个可以为您处理此逻辑的组件：

class SmartImage extends React.Component {
  constructor() {
    super();
    this.state = { fallback: true };
  }

  componentDidMount() {
    this.checkImage();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.image !== this.props.image) {
       this.checkImage();
    }
  }

  checkImage() {
     let img = new Image(this.props.img);
     img.onload =  () => {
       this.setState({ fallback: false });
     };
     img.onerror = () => {
       this.setState({ fallback: true });
     };
  }

  render() {
    return (
      <img src={this.state.fallback ? this.props.imgFallback : this.props.img} />
    );
  }
}

而不是直接呈现img标记，您可以像这样呈现SmartImage组件： <SmartImage img={url1} imgFallback={url2} />

它基本上检查图像是否在每次更改时成功加载，并在安装时，并相应地更改状态，然后相应地呈现。

如何在反应中制作列表时替换图像的src

1 个答案: