从React中的json文件数据搜索筛选器

我已经建立了一个搜索过滤器来做出反应。JSON文件存储模型的名称和图像。有一个错误，例如名称可以显示在网站上，但图像无法读取。 我的密码在这里

import React，{Component}来自“React”；
进口{
输入，
卡片
名片夹，
名片
}来自“mdbreact”；
导入“/style.css”；
从“/models.json”导入模型列表；
类应用程序扩展组件{
状态={
搜索：“
};
renderModel=模型=>{
返回(


{model.name.substring（0,15）}
{model.name.length>15&&“…”}
);
};
onchange=e=>{
this.setState（{search:e.target.value}）；
};
render（）{
const{search}=this.state；
常量filteredModels=modelList.filter（model=>{
返回model.name.toLowerCase（）.indexOf（search.toLowerCase（））！=-1；
});
返回(
{filteredModels.map（模型=>{
返回此.renderModel（model）；
})}
);
}
}
导出默认应用程序；

---

有人能过来帮我在网站上显示JSON上的图像吗？非常感谢

只需将图像移动到您的公用文件夹，这样它们就不会在启动时全部加载，而是在需要时加载

您只需按原样移动整个文件夹即可

如果在url前面添加

/

，则

将自动搜索公用文件夹中的图像：

[
  {
    "name": "Sample 1",
    "image": "/asset/crab-nebuala.png"
  },
  {
    "name": "Sample 2",
    "image": "/asset/crab-nebula.png"
  },
  {
    "name": "Sample 3",
    "image": "/asset/ghost-nebua.png"
  },
  {
    "name": "Sample 4",
    "image": "/asset/sample-nebula-2.png"
  },
  {
    "name": "Sample 5",
    "image": "/asset/sample-nebula.png"
  }
]

这就是你所需要的。这是您的更新。
当您需要的是
src={model.image}
时，您就有了
src={blankImg}
。请注意，它们无法正确解析，最好使用一个公共目录来存储图像并从中加载它们。这对公共目录意味着什么？你能举一些例子吗？据我所知，空白似乎不存在。如果我只是做了一个自然的，它不会产生任何东西。@AlexanderHemming我已经更新了代码，无法阅读网站上的图片。我怎样才能修复它？图像显示无序。如何重新排列方框内的图像？为img组件设置宽度和高度，例如50。如果这解决了您的问题，您是否可以将其标记为已接受，以便其他人也可以找到答案？您想通过沙盒链接告诉我什么？正如我前面所说，为img组件添加宽度和高度。
[
  {
    "name": "Sample 1",
    "image": "/asset/crab-nebuala.png"
  },
  {
    "name": "Sample 2",
    "image": "/asset/crab-nebula.png"
  },
  {
    "name": "Sample 3",
    "image": "/asset/ghost-nebua.png"
  },
  {
    "name": "Sample 4",
    "image": "/asset/sample-nebula-2.png"
  },
  {
    "name": "Sample 5",
    "image": "/asset/sample-nebula.png"
  }
]