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

У меня есть код ниже для отображения изображений в Image.Group с параметром размера, который должен быть установлен на «маленький». Внутри 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>

До нажатия:введите здесь описание изображения После нажатия:введите здесь описание изображения


reactjs semantic-ui-react react-modal
person damingzi    schedule 29.09.2019    source источник
comment
Может быть, это только реальный размер изображения. Можете ли вы предоставить фактическое изображение и ссылку на библиотеку ModalImage?   -  person ravibagul91    schedule 29.09.2019
comment
Итак: firebasestorage.googleapis.com/v0/b/freebies-df71a.appspot.com/   -  person damingzi    schedule 29.09.2019
comment
Изображение, показанное в посте, отображается горизонтально, попробуйте повернуть его, чтобы получить вертикальное изображение.   -  person ravibagul91    schedule 29.09.2019
comment
Я старался. Не помогает, все же маленький размер   -  person damingzi    schedule 29.09.2019
comment
Что такое ModalImage? Какой-то внешний пакет? Или вы можете предоставить codepen для этого?   -  person ravibagul91    schedule 29.09.2019
comment
Дело в том, что если я удалил size=small в Image.Group, я могу видеть большое изображение при нажатии на изображение, но изображение до щелчка больше не является миниатюрой маленького размера, оно также имеет большой размер.   -  person damingzi    schedule 29.09.2019
comment
@ravibagul91ModalImage взят с сайта npmjs.com/package/react-modal-image. Извините, я не знаю, как настроить codepen :(   -  person damingzi    schedule 29.09.2019
comment
Я также не знаю, что происходит, я попробовал простое изображение, и оно работает нормально. Я сомневаюсь, что это связано с height={150} на Lazyload компоненте. Что это? Попробуйте удалить его и проверьте, получаете ли вы тот же результат.   -  person ravibagul91    schedule 29.09.2019
comment
Привет, damingzi, проверьте мое решение и дайте мне знать, если это поможет.   -  person ravibagul91    schedule 29.09.2019

Ответы (1)


arrow_upward
4
arrow_downward

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

Демо

person ravibagul91    schedule 29.09.2019
comment
Спасибо, Рави!. Вы даете мне подсказку по использованию className. Настоящая проблема в размере = маленьком. После удаления size=small и определения настраиваемого className для отображения маленького изображения проблема решена. Спасибо еще раз! - person damingzi; 29.09.2019