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

Question

我有下面的代码来显示 Image.Group 中的图像，并将大小属性设置为 "small"。在 Image.Group 中，我使用了从 react-modal-image 导入的 ModalImage。单击图像时应该显示大尺寸照片。但事实是，当点击图片时，它仍然显示与之前相同大小的图片。我知道问题出在 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

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

如果您想显示尺寸为 150px 的图像缩略图，则可以在 ModalImage 上添加一个 class 名称并将 CSS 应用于 [=28] =] 名字.

<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 class,

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

Demo

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

react modal image doesn't show large size image when being clicked

reactjs

semantic-ui-react

react-modal