时间戳

首页 > 解决方案 > url被破坏时如何在React中显示虚拟图像？

reactjs - url被破坏时如何在React中显示虚拟图像？

问题描述

我的代码

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


class App extends Component {
  state = {
    loaded: false,
    error: false
  }

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

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

  }

  render() {
    // let imgSrc = (!error) ? src: fallbackSrc
    return (
     <div>
        <img src= {'https://unsplash.com/photos/wQLAGv4_OYs'} alt={'Wresting Character'} onLoad={() => this.onImageLoad()} onError={require('../src/images/batista.jpg')} />
      </div>
    )
  }
}



export default App;

如果网址损坏，我想显示后备图片。现在显示默认图像，但如果我更改它的 url，页面会引发错误。如果我的链接损坏，我如何显示虚拟图像。

标签： reactjsimageonclickdummy-variablefallback

解决方案

一旦发生错误，您可以回退到默认图像：

onImageError = (ev) => {
  this.setState({
    error: true
  });
  ev.target.src = 'some default image url';
}

推荐阅读