如何在反应中的 img 标签中添加替代图像 - Javascript

在web开发中，图片是网站很重要的一部分，那么在一些情况下，图片无法正常加载，这时候在img标签中添加替代图像是很必要的。本文将介绍在React中如何添加替代图像。

使用alt属性添加替代图像

在React中，我们可以使用<img>标签（JSX中为）来添加图片。为了添加替代图像，我们可以使用alt属性来描述图片，当图片无法加载时，描述文字就会出现。

<img src="image.jpg" alt="替代图像" />

在这个例子中，图片无法加载时，"替代图像"将会被显示出来。

使用onError事件添加替代图像

另外一个添加替代图像的方法是使用onError事件。当图片加载失败时，onError事件将会被触发，我们可以在事件处理函数中设置替代图像。

class MyImg extends React.Component {
  constructor(props) {
    super(props);
    this.state = { isError: false };
  }

  handleError() {
    this.setState({ isError: true });
  }

  render() {
    return (
      <img src="image.jpg" alt="My Image" onError={this.handleError.bind(this)} className={this.state.isError ? 'error' : ''} />
    );
  }
}

在这个例子中，当图片加载失败时，handleError()事件处理函数将会被触发，isError状态将会被设置为true，我们可以在render()函数中根据isError的值来判断是否显示替代图像。

.error {
  background-image: url('placeholder.jpg');
}

我们还需要添加CSS样式来设置替代图像的样式。

总结

在React中添加替代图像是一项非常必要的任务，无论是使用alt属性还是onError事件，都可以很容易地完成这项任务。记住，我们的目标永远是为了提高用户体验。