React 页面无法通过带有相对文件路径的 JSON 加载图像

Posted 2023-02-15

【中文标题】React 页面无法通过带有相对文件路径的 JSON 加载图像

【英文标题】：React page cannot load image via JSON with relative file path

【发布时间】：2022-01-11 11:52:23

【问题描述】：

这是我的第一篇文章，如果缺少任何重要信息，敬请见谅。

我正在构建一个带有反应的网页。我正在尝试通过映射一个相对简单的 JSON 文件来在我的网页上填充一个页面。

除了图像之外，一切都很好。我正在尝试对图像源使用相对文件路径，但到目前为止我所做的一切都只是导致图像图标损坏。

到目前为止，我已经尝试通过将来自互联网的图像 url 放入 JSON 中进行故障排除。

这是我的反应代码：

Services.map((item) => 
            return (
              <Fragment>
                <li className="services-item">
                  <img
                    src=item.image
                    className="services-item-img"
                  />
                  <div className="services-item-text">
                    <div className="h1">item.title</div>

                    <div className="p1">item.paragraph</div>
                  </div>
                </li>

                <div className="diamonds-container">
                  <img src=Diamonds className="diamonds" />
                </div>
              </Fragment>
            );
          )

这是我的 JSON 文件：

    [
  
    "title": "DESIGN & WEB",
    "paragraph": "Brand consistancy and agility are important, which is why we do it all in one place. We want to make this complex task as simple as possible for everyone we work with.",
    "image": "../images/pen.svg"
  ,
  
    "title": "MOTION DESIGN",
    "paragraph": "Our talent pool has a long history in the motion design world. From creating graphics for New Zealand's largest broadcast outlets, to animating content for hugely succesful YouTube channels across the globe.",
    "image": "../images/keyframe.svg"
  ,
  
    "title": "PHOTO & VIDEO",
    "paragraph": "Photography, film and video is a long term passion of ours. Every photography or video project that we have been a part of, takes with it a part of our heart and soul.",
    "image": "../images/video.svg"
  
]

如果有帮助，这也是我的文件夹结构的屏幕截图： 项目文件夹结构：

谢谢！

【问题讨论】：

也许您必须将相对路径从 ../images 更改为 /images/ 从路径开头删除 ..

您可以在chrome中打开开发者工具并观看网络选项卡并查看图像加载路径。

把图片文件夹放到公用文件夹里面，像这样编辑图片属性"./images/video.svg"

@mirsahib 成功了，谢谢！您能否将此解决方案作为答案发布，以便我将其标记为正确？再次感谢！

【参考方案1】：

将图像文件夹放入public 文件夹中并像这样编辑图像属性"./images/video.svg"

为什么会这样

因为在浏览器中渲染的是 public/index.html 文件，所以您必须添加相对于公共文件夹的图像资产