时间戳

首页 > 解决方案 > 在页面加载时使用默认图像，然后覆盖它

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

问题描述

我有一个包含几张图片的页面。当页面加载时，它会为每个 IMG 提供一个默认图像：

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

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

我想要的是这样的：

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

src2 在加载时会覆盖 src1。

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

标签： javascriptreactjsimage

解决方案

在您的元素上使用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>元素并根据条件在它们之间切换。

推荐阅读