如何以模态显示照片？

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 的确切图像路径