单击时反应模态图像不显示大尺寸图像

Question

我下面有代码可以显示Image.Group中的图像，且尺寸属性设置为“小”。在Image.Group一侧，我使用了从ModalImage导入的react-modal-image。单击图像时应该显示大尺寸的照片。但是事实是，当单击图像时，它仍然显示与以前相同大小的图像。我知道问题出在size="small"，而ModalImage只是从Image.Group继承了prop。在这种情况下，如何在单击图像的情况下将尺寸覆盖大？

<Image.Group size="small">
  {photos &&
    photos.map(photo => (
      <LazyLoad key={photo.name} height={150}>
        <ModalImage
          small={photo.url}
          large={photo.url}
          alt={photo.name}
          hideDownload={true}
          hideZoom={true}
        />;
      </LazyLoad>
    ))}
</Image.Group>

在被点击之前： 点击后：

Answer 1

我认为问题是由于height={150}组件上的Lazyload造成的。

如果要显示大小为150px的图像缩略图，则可以在ModalImage上添加一个类名，并将CSS应用于该类名。

<LazyLoad key={photo.name}>  //Remove height here
   <ModalImage
      small={photo.url}
      large={photo.url}
      alt={photo.name}
      hideDownload={true}
      hideZoom={true}
      className="modal-image"    //Add a class name here
   />;
</LazyLoad>

将CSS应用于modal-image类，

.modal-image{
  max-height: 150px !important;
}

Demo