React.js 判断题应用图片不显示问题求助

1. 检查图片路径配置 #

• 确认quiz.json里的图片路径格式：
  • 本地图片：若放在public/images目录下，json内路径需以/开头（如"/images/xxx.jpg"），避免用相对路径（如"./images/xxx.jpg"），否则React打包后路径会失效。
  • 远程图片：直接复制图片URL到浏览器地址栏测试，确认可正常访问。
• 排查路径拼写错误：注意文件名大小写、后缀（比如.jpg和.jpeg不要混淆），Linux系统对路径大小写敏感，需严格匹配。

2. 规范React组件的图片渲染逻辑 #

在Quiz.jsx中，按照React要求渲染图片：

• 本地图片（public目录）：直接使用json中的路径即可，示例代码：

  <img src={quizItem.image} alt="题目配图" />
  

• 避免动态require的错误用法：如果图片放在src目录下，动态导入时路径必须是静态可解析的，不要拼接变量（比如require(../images/${quizItem.image})会导致打包无法识别），建议统一将图片移至public目录简化处理。

3. 检查打包与静态资源配置 #

• 若使用Create React App：public目录下的资源会原封不动复制到打包根目录，路径必须以/开头；src目录下的图片必须通过import或require引入，否则打包后无法找到。
• 自定义webpack配置：确保file-loader或url-loader正确配置，能处理jpg、png等图片格式。

4. 排查浏览器缓存与网络请求 #

• 强制刷新浏览器（Ctrl+F5）清除缓存，避免旧缓存导致图片不显示。
• 打开浏览器开发者工具（F12）的Network标签：
  • 查看图片请求状态：404代表路径错误；200但不显示可能是图片损坏或MIME类型错误；无请求记录则说明组件未渲染图片元素。

5. 复用图片的优化与排查 #

针对重复使用的图片，可提前预加载避免加载异常，示例代码：

useEffect(() => {
  const uniqueImages = new Set(quizData.map(item => item.image));
  uniqueImages.forEach(src => {
    const img = new Image();
    img.src = src;
  });
}, [quizData]);

6. 验证JSON数据格式 #

检查quiz.json中图片路径是否有多余空格、转义字符，比如：

• 错误格式："image": " /images/q1.jpg "（前后含空格）
• 正确格式："image": "/images/q1.jpg"

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