Question

我在发送选择对象照片以模式显示时有问题吗？ Somobody知道我做错了什么？我有。

当我单击“图像”时，我得到一个对象，但是它没有在里面放图片，我不知道缺少了什么？

对于数组，我有一个巨大的问题，我无法理解为什么不显示正在发送的对象，我将不胜感激。

数组

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

当我单击Image时，我得到一个对象，但是它没有在里面放图片，我不知道缺少什么？

编辑：在这种情况下，这是结果：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中，将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时间内创建的，因为您已将src标记中的确切图像路径指定给img

如何以模态显示照片？

1 个答案:

对项目进行以下更改