React中添加代码后图片无法显示，求解决使其可见的方法

问题概述 #

添加代码后页面图片无法正常加载，相关截图如下：

问题现象截图 #

VSCode代码及设置截图 #

实用解决步骤 #

• 核对图片路径：
  • 确认相对路径与文件层级匹配，比如图片放在./assets/目录下，代码需写src="./assets/xxx.png"，避免路径拼写错误导致资源找不到。
  • 本地开发优先用相对路径，绝对路径需确保服务器根目录对应正确。
• 检查图片文件：
  • 打开图片确认未损坏，用其他正常图片替换测试，排除文件本身问题。
• 排查代码语法：
  • 确认<img>标签闭合完整，src属性拼写无误（别写成scr），引号配对正确。
  • 框架项目（如Vue/React）需按规范引入图片，比如Vue中用require('./assets/xxx.png')或import导入资源。
• 检查VSCode配置：
  • 查看是否有路径别名类插件，确认别名配置与实际路径一致。
  • 检查工作区files.associations等设置，避免路径识别异常。
• 清除浏览器缓存：
  • 按Ctrl+Shift+R强制刷新页面，排除旧缓存影响。

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