在页面加载时使用默认图像，然后覆盖它

Question

我有一个页面，其中包含多个图像。当页面加载时，它为每个 IMG 提供一个默认图像：

import default from './pics/default.jpg';

<img src={default} alt="#"/>

我想要的是这样的：

<img src1={default} src2="img url" alt="#"/>

其中 src2 在加载时覆盖 src1。

编辑： 第一个图像 (src1) 在页面加载时出现，而第二个 (src2) 是通过 Internet 请求的。示例：https : //cdn.pixabay.com/photo/2016/10/17/10/52/wind-farm-1747331__340.jpg

Answer 1

在您的元素上使用该onLoad事件<img>。您可以给它一个display: none样式，直到它完成加载。

class ImageRoll extends React.Component {
  state = {loaded: false};
  
  showImage = () => {
    this.setState({loaded: true});
  }
  
  render() {
    return (
      <>
        <img src="/path-to-initial" style={ this.state.loaded ? {display: "none"} : {}} />
        <img src="/path-to-seocndary" onLoad={this.showImage} style={ this.state.loaded ? {} : {display: "none"}} />
      </>
    );
  }
}

编辑：与其他答案相反，我们想要这样做的原因是替换图像上的 src 实际上是不好的做法。如果您想滚动图像，最好有两个<img>元素并根据条件在它们之间切换。