如何处理React中的破损图片 | 破损图片的处理

本教程展示了如何在react应用程序中修复损坏的图像。

让我们看看如何创建和显示图片？

Html提供了img标签来显示图片

<img  src="first.png" alt ="Image example"  />

在网络浏览器中显示的图片，如果first.png没有找到或出现404错误怎么办。

Html提供了onerror ，当src图片出现错误或404的时候，就会出现后备图片。

<img src="first.png" onerror="this.src='error.png';this.onerror='';">

我们也可以在React组件中这样处理。

如何在React组件中处理破碎的图片？

img 下面的组件显示一个带有alt文本的图片。

import logo from './logo.svg';
import './App.css';

function App() {
 let logotext = "Hello World logo";
 return (
   <div className="App">
     <img src={logo} className="App-logo" alt={logotext} />
   </div>
 );
}

export default App;

因此，img 标签在react中包含onError属性，可以用新的图像来设置src属性。 一种方法是使用内联函数声明

      <img src={logo} className="App-logo" alt={logotext}
       onError={e => { e.currentTarget.src = "error.png"; }} />

或者你可以写一个事件绑定函数

      <img src={logo} className="App-logo" alt={logotext}
       onError={this.getImageError} />

和绑定函数

getImageError = e => { 
e.currentTarget.src = "error.png";
}

下面是一个完整的代码，用于处理反应组件中的图像错误

import logo from './logo1.svg';
import './App.css';

function App() {
  let logotext = "Hello World logo";
  getImageError = e => {
    e.currentTarget.src = "error.png";
  }
  return (
    <div className="App">
      <img src={logo} className="App-logo" alt={logotext}
        onError={this.setImageError} />
    </div>
  );
}
export default App;