React应用本地图片无法显示问题求助

以下是针对你遇到问题的排查和解决步骤：

• 检查路径与文件名大小写
  React项目（尤其在类Unix系统下）对文件名大小写敏感，确认导入路径中的文件名（比如portfolio_logo.png）和实际文件的名称、大小写完全一致，避免因大小写不匹配导致路径解析失败。

• 验证图片文件本身有效性
  直接将图片文件拖入浏览器，确认图片能正常显示。如果图片本身损坏或格式不兼容，无论哪种导入方式都无法正常渲染。

• 确认src/assets文件夹下的导入逻辑

  • 先核对路径层级：如果App.jsx在src根目录，./assets/portfolio_logo.png是正确路径；若App.jsx在src/components子目录，路径需改为../assets/portfolio_logo.png。
  • 导入后可通过console.log(LOGO)查看输出，正常应为编译后的资源路径（如/static/media/portfolio_logo.xxxxxx.png）；若输出undefined，说明路径错误。

• public文件夹的正确使用方式
  若图片放在public/assets/portfolio_logo.png，无需导入，直接使用绝对路径：

  <img src="/assets/portfolio_logo.png" alt="portfolio logo" />
  

  注意路径需以/开头，直接指向public目录下的文件，不要添加./或../前缀。

• 排查img标签的样式问题
  有时图片已加载，但因样式设置导致不可见：

  • 在开发者工具中查看img元素的计算样式，确认width、height不为0，display属性不是none，也没有被其他元素遮挡。
  • 可临时添加测试样式排查：

    <img src={LOGO} alt="portfolio logo" style={{ border: '1px solid red', width: '100px', height: 'auto' }} />
    

• 检查项目配置兼容性

  • 若使用Vite，确认vite.config.js中assetsDir配置未修改为错误路径（默认是public）。
  • 若使用Create React App（CRA），避免eject后修改webpack配置导致资源解析规则出错。

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