图库的图像在删除图像后失去比例答案

【问题标题】：Gallery's images lose their proportion after deleting an image图库的图像在删除图像后失去比例
【发布时间】：2020-12-04 23:07:23
【问题描述】：

我有一个画廊。当我删除一张图片时，删除后的图片会失去比例。

如果我删除冰淇淋图像，例如，画廊变成这样：渲染函数如下所示：

  deleteImage = (e) => {
    this.setState({
      imageUrlArray: this.state.imageUrlArray.filter((url) => url !== this.state.popImageUrl)
    })
  }

  onImgLoad = ({target:img}) => {
  let aspectRatio = img.offsetWidth/img.offsetHeight;
  img.style.width = aspectRatio*200 + "px";
  img.style.flexGrow = aspectRatio*200; 
}

    render() {
    let imageUrlArray = this.state.imageUrlArray;
    
    const images = imageUrlArray.map((url, index) =>{
    return(
          <img
            src={url} 
            alt="imageItem"
            onClick={() => this.handlePopup(url)}
            onLoad={this.onImgLoad}
            key={index}
          />
      )
    })
    return (
      <div className="root" onDragEnter={this.onDragEnter} onDragOver={this.onDragOver} onDrop={this.onDrop}>
        <section>
          {this.state.showModal && (
          <Popup
          deleteImage={this.deleteImage}
          popImageUrl={this.state.popImageUrl}
          closePopup={this.handlePopup}
          />)}
          {images} 
        </section>
      </div>
    )
  }

注意：所有比例均在 onImgLoad 函数中计算。

解决方案：naturalWidth 和 naturalHeight 完成了这项工作。但如果有人能解释为什么删除后 offsetHeight 和 offsetWidth 会发生变化，我将不胜感激。

【问题讨论】：

标签： javascript css reactjs sass

【解决方案1】：

您需要在删除图像后刷新页面，因为已删除图像的下一张图像会从该已删除图像中获取坐标和大小。

【讨论】：

图像不会保存在任何地方。一切都会回到初始状态。