Как я могу отобразить фотографию в модале?

Question

У меня проблема с отправкой выбрать фотографию объекта для показа в модальном режиме? Кто-нибудь знает, что я не так делаю? У меня есть.

Когда я нажимаю на Изображение, то получаю объект, но он не помещает картинку внутрь. Я не знаю, чего не хватает?

С массивами у меня огромная проблема, я не могу понять, почему отправляемый объект не отображается, буду благодарен за предложения и ответы.

Массивы

const dataImage = [
  {
    id: 1,
    name: 'Letniskowy Pałac Branickich',
    img: 'branicki.jpg'
  },
  { 
    id: 2,
    name: 'W drodze do Torunia',
    img: 'roadTorun.jpg'
  },
  {
    id: 3,
    name: 'Kładki w Śliwnie',
    img: 'sliwnoKladki.jpg'
  },
  {
    id: 4,
    name: 'Sopockie Molo',
    img: 'sopotMolo.jpg'
  }
]

Мой главный компонент

export default function FlexPanelGallery () {
    const [imagesToGallery] = useState(dataImage);
    const [grayscale, setGrayscale] = useState(0);
    const [selectedPhoto, setSelectedPhoto] = useState();
    const [modal, setModal] = useState(false);
    const [subtitle, setSubTitle] = useState('');
    const [modalMainOpen, setModalMainOpen] = useState(false);
    const [pic, setPic] = useState();
    const makeGrey = {
      filter: `grayscale(${grayscale})`
    }

    function toggleModal (pic) {
      setModalMainOpen(true)
      setPic(pic);
      console.log('What is pass! ' + pic)
      return pic
    }
   let photoList = imagesToGallery;
   console.log(photoList);

  return (
    <div>
      <div className="container" style={makeGrey}>        
        {photoList.map((img, i)=> (
          <ImageThumb 
            img={img.img} 
            key={i} 
            name={img.name} 
            onActivePhoto={toggleModal.bind(this, img.img)}
            />
        ))}    
      </div>
      <div style={buttonStyle}>
        <Button variant="contained" color="primary" onClick={() => setGrayscale(4)} >Grayscale</Button>
        <Button variant="contained" color="secondary" onClick={() => setGrayscale(0)} >Normal</Button>
      </div>
{/* When I click this button then i have image in tag <img />  */}
      {/* <button onClick={toggleModal.bind(this, 'http://lorempixel.com/200/200/business/1')} >Click</button> */}


      <button onClick={e => toggleModal(pic)}>Trigger Modal</button>
        <Modal bg="#222" show={ modalMainOpen } 
            onClose={toggleModal.bind(this) }>
            <img src={pic} />
            {pic}
        </Modal>
    </div>
  )
}

class Modal extends React.Component {
  render() {
    const { show, bg, closeModal } = this.props;
    // Custom styles: set visibility and backbround color
    const styles = {
      modal: {
        display: (show) ? null : 'none', 
        backgroundColor: bg || 'rgba(255, 255, 255, 0.8)',       
      }
    };

    return (
      <div className="modal-wrapper" style={styles.modal}>
        <span className="glyphicon glyphicon-remove-sign modal-item"
            onClick={this.props.onClose}></span>
        <div className="modal-item">
            { this.props.children}
                </div>
      </div>
    )
  }
}

Пустой компонент, куда я вставляю данные

const ImageThumb = (props) => (
    <div className="cardImage">
      <div className="box">
        <img src={require('./Images/' + props.img)} alt={props.name} onClick={props.onActivePhoto} />
      </div>
      <div className="thumbTitle">{props.name}</div>
    </div> 
);

Когда я нажимаю на Изображение, то получаю объект, но он не помещает картинку внутрь. Я не знаю, чего не хватает?

EDIT: Это результат в этом случае: https://scherlock90.github.io/flex-panel-gallery/

Answer 1

Вы пытаетесь включить изображение динамически.Но ваш путь к изображению указывает на ./Images/roadTorun.jpg.

Как программа, работающая в браузере, распознает этот путь?

src/FlexComponents/Flex-panel-gallery.js Line 78

<img src={pic} />

Если вы хотите найти изображение динамически, вам нужно переместить папку Images в output bundleкаталог.В вашем случае это public каталог

Внесите следующие изменения в ваш проект

• Переместите каталог Images с src/FlexComponents/Images на public/Images

• В Flex-panel-gallery.js, обновить toggleModel метод в line 45 с кодом ниже

function toggleModal (pic) {
      setModalMainOpen(true)
      setPic('/Images/'+pic);      
}

• В Flex-panel-gallery.js, обновить *От 1033 * до кода ниже

<img src={'/Images/' + props.img} alt={props.name} onClick={props.onActivePhoto} />

Убедитесь, что это исправляет вашу проблему

Примечание

У вас не возникало проблем сотображение изображений с использованием вашего текущего кода на line 114

<img src={require('./Images/' + props.img)} alt={props.name} onClick={props.onActivePhoto} />

Это связано с тем, что вы включили статический путь к изображению, поэтому webpack импортировал изображение во время build time, поэтому изображения были отрисованы в ImageThumb component

Ниже путь в вашем ImageThumb компоненте был создан веб-пакетом в течение build времени, так как вы указали свой точный путь к изображению src в img теге