如何以模态显示照片？

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

对您的项目进行以下更改

将 Images 目录从 src/FlexComponents/Images 移动到 public/Images
在Flex-panel-gallery.js中，用下面的代码

line 45

toggleModel

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 组件中的以下路径是由 webpack 在 build 时间内创建的，因为您已经在 img 标签中为 src 提供了确切的图像路径

如何以模态显示照片？

How can I to display photo in modal?

arrays

modal-dialog

reactjs

react-hooks

对您的项目进行以下更改