Arrays 如何在modal中显示照片？

我有问题发送选择对象照片显示在模态？你知道我做错了什么吗？我有

当我点击图像，然后我得到一个对象，但它并没有把一张图片放在里面，我不知道是什么丢失了

对于数组，我有一个巨大的问题，我无法理解为什么发送的对象没有显示，我将非常感谢您的建议和回答

阵列

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

导出默认功能FlexPanelGallery（）{
const[imagesToGallery]=useState（dataImage）；
const[grayscale，setGrayscale]=使用状态（0）；
const[selectedPhoto，setSelectedPhoto]=useState（）；
const[modal，setModal]=useState（false）；
const[副标题，setSubTitle]=使用状态（“”）；
const[modalmanopen，setmodalmanopen]=useState（false）；
const[pic，setPic]=useState（）；
常数makeGrey={
过滤器：`grayscale（${grayscale}）`
}
功能切换模式（pic）{
SetModalManopen（真）
setPic（pic）；
console.log（'What is pass！'+pic）
返回图片
}
让photoList=imagesToGallery；
控制台日志（照片列表）；
返回(
{photoList.map（（img，i）=>(
))}    
设置灰度（4）}>灰度
setGrayscale（0）}>正常
{/*当我单击此按钮时，标记中有图像
{pic}
)
}

类模态扩展React.Component{
render（）{
const{show，bg，closeModal}=this.props；
//自定义样式：设置可见性和后圆角颜色
常量样式={
模态：{
显示：（显示）？空：“无”，
背景颜色：bg | |“rgba（255，255，255，0.8）”，
}
};
返回(
{this.props.children}
)
}
}

插入数据的空组件

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

const ImageThumb=（道具）=>(
{props.name}
);

当我点击图像，然后我得到一个对象，但它并没有把一张图片放在里面，我不知道是什么丢失了？

编辑：

---

这种情况下的结果是：

您试图动态地包含一个图像。但是您的图像路径指向

/Images/roadTorun.jpg

在浏览器中运行的程序如何识别此路径

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

<img src={pic} />

• 在

  Flex-panel-gallery.js

  中，将

  第114行更新为下面的代码

这是因为您静态地包含了图像路径，所以webpack在构建时导入了图像，这就是图像在

ImageThumb

组件中呈现的原因

您的

ImageThumb

组件中的以下路径是由webpack在

build

期间创建的，因为您已在

img

标记中为

src

指定了确切的图像路径

---

是否可以通过git共享该项目？感谢您的帮助！我仍然有一个问题，如果我想在src中拥有所有的图像？构建组件和案例2还有其他途径吗？还是将图像存储在公共或src中更好？因为我知道我是静态拍摄的，但我不明白为什么我没有得到相同的照片。当我想要托管结果时，我处于控制台状态404，没有图像加载，但当我更改函数setPic中的代码时（require（'./图像/'+pic））；添加点和require则一切正常：P我对您的建议做了一些更改，但如果没有您的指导，我不会想到我可以做到：-）

静态导入

-webpack在

构建时

知道您将使用一个图像，webpack将使用

文件加载器

并对其进行优化，并将其放置在不同的路径中，如我在回答中所述。如果是

动态导入

，则在

构建期间

网页在

require（'/Images/'+pic）

中不会被称为

pic

。因此，放置在

src

中的任何图像都不会被加载，这就是为什么在

模式中出现空白图像的原因。这就是为什么您必须将
图像
从srcOk移动到
public
文件夹中的原因，但是当我在函数中设置toggleModal This code->setPic（require（'./images/'+pic））时，我在src中有文件夹图像；然后一切顺利。在github主机上运行良好。但是我要感谢您没有您的帮助，我不会再继续了
src/FlexComponents/Flex-panel-gallery.js Line 78

<img src={pic} />

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

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


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