React从JSON数据库加载图片失败求助：img标签无法显示本地图片

你遇到的核心问题是直接使用了本地系统的绝对路径引用图片——浏览器有安全沙箱限制，无法直接访问你的本地文件系统路径，而且React项目打包后，资源结构会被重构，这种绝对路径完全不适用。下面给你几个可行的解决方案：

方案一：将图片放在public文件夹中 #

React项目的public目录是专门存放静态资源的区域，这里的文件会被直接复制到打包后的根目录，无需经过webpack处理。

1. 把pasta_napolitana.jpg移动到项目的public/images文件夹（没有images文件夹就新建一个）
2. 修改JSON文件的image字段为相对路径：

   "image": "/images/pasta_napolitana.jpg"
   

3. 你的<img>标签可以保持不变：

   <img src={post.image} alt="Pasta Napolitana" />
   

方案二：将图片放在src文件夹中并通过模块引入 #

如果图片存放在src目录下，需要通过ES模块的import或require来引用，webpack会自动处理资源路径，生成打包后的正确地址。

1. 确保图片在src/images文件夹内
2. 修改JSON文件的image字段为纯文件名：

   "image": "pasta_napolitana.jpg"
   

3. 在组件中动态引入图片：

   <img 
     src={require(`./images/${post.image}`).default} 
     alt="Pasta Napolitana" 
   />
   

   也可以提前静态导入图片：

   import pastaImage from './images/pasta_napolitana.jpg';
   // 然后使用
   <img src={pastaImage} alt="Pasta Napolitana" />
   

额外检查点 #

• 确认图片文件名和路径拼写完全一致（注意大小写：Windows不区分，但部署到Linux/macOS服务器时会严格区分）
• 验证fetch返回的post.image确实是你修改后的正确路径

内容的提问来源于stack exchange，提问作者anit