如何以模态显示照片？

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

当我点击图像然后我得到一个对象，但它没有放入图片里面我不知道缺少什么？

编辑：这是在这种情况下的结果：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目录

Make below changes to your project

• 将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中，将line 114更新为以下代码

<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组件中呈现的原因

你的ImageThumb组件中的路径是在build时间由webpack创建的，因为你已经在src标签中给出了img的确切图像路径