Fatal编程技术网
  • javascript/
  • Javascript 使用图像srce模拟json结构，并在本地访问React文件中的图像

Javascript 使用图像srce模拟json结构，并在本地访问React文件中的图像

javascript reactjs image

Javascript 使用图像srce模拟json结构，并在本地访问React文件中的图像,javascript,reactjs,image,Javascript,Reactjs,Image,我想用商店里的一系列物品制作一个小型购物应用程序。我在想这样的事情： //在MyStore/index.js const storeItems=[{src:'../images/football.jpg'，title:'football'}，{src:'../images/basketball.jpg'，title:'basketball'} 我想我有这样的文件夹结构： /images/football.jpg /components/MyStore/index.js 我还尝试将图像文件夹放在公

我想用商店里的一系列物品制作一个小型购物应用程序。我在想这样的事情：

//在MyStore/index.js const storeItems=[{src:'../images/football.jpg'，title:'football'}，{src:'../images/basketball.jpg'，title:'basketball'}

我想我有这样的文件夹结构：


/images/football.jpg


/components/MyStore/index.js

我还尝试将
图像
文件夹放在公用文件夹（？）中，并尝试引用该文件夹，但无法访问图像。如果我只需要一个名为
public
的文件夹，那么这可能不是“正确配置”的？也许我需要在网页包配置中做些什么？我正在使用CreateReact应用程序，所以我想这一切都是为我准备的

我试图在图像标签上添加相似的宽度和高度，使其比我得到的0x0大，但没有帮助

我试过这样的东西

我怎样才能做到这一点

我知道我可以将这两个图像导入React文件，就像这样，并直接在图像标记中使用它：

从“../../images/football.jpg”导入footballSrc


但这不是我想要的。我希望能够模拟包含所有图像src的json文件。
我认为您应该映射数组，并需要上面示例中的图像


现在，我不知道这将如何工作，但如果我有一个API返回带有该数组的JSON结构，我可能不得不以某种方式实现这一点，因为我不能包含基于该API响应的图像。如果我不应该嘲笑这一点，我不知道是应该将图像存储在数据库中，还是存储在其他内容中（我读了一些关于文件存储的内容）。如果你有一个好的解决方案，请告诉我