реагирующее модальное изображение не показывает изображение большого размера при нажатии - PullRequest
Новая
       22

реагирующее модальное изображение не показывает изображение большого размера при нажатии

2 голосов
/ 29 сентября 2019

У меня есть код ниже для отображения изображений в Image.Group с размером prop, установленным на «small».В стороне Image.Group я использовал ModalImage, который импортируется из react-modal-image.Предполагается, что при нажатии на изображение будет отображаться фотография большого размера.Но дело в том, что при нажатии на изображение все равно отображается изображение того же размера, что и раньше.Я знаю, что проблема от size="small", и ModalImage просто наследует реквизит от Image.Group.В этом случае, как я могу перезаписать размер на большой при щелчке по изображению? 

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

До нажатия: enter image description here После нажатия: enter image description here

1 Ответ

4 голосов
/ 29 сентября 2019

Я думаю, что проблема связана с 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;
}

Демо

...