React.js中图片导入失败问题求助

嘿，我之前也碰到过类似的麻烦，结合你的情况咱们一步步来排查解决：

1. 确认静态资源的存放位置与导入规则 #

Create React App（CRA）对静态资源的处理有明确规则：

• 如果通过import导入图片，图片文件必须放在src文件夹内部——webpack会对src内的资源进行打包处理，而src外的资源默认不会被识别。
• 你的代码里用了../../images/logo.jpg，这说明images文件夹大概率在src的同级目录下，这种情况下webpack无法处理这些外部资源，自然会编译失败。

解决方法：
把images文件夹移动到src目录下（比如调整为src/images），然后修改导入路径：

// 假设Header组件在src/components/Header目录下
import RMDBLogo from '../images/logo.jpg';
import TMBDLogo from "../images/tmbd_logo.svg";

2. 修复VS Code的文件夹显示问题 #

你说VS Code里导航到images文件夹时显示为空，但实际有文件，这大概率是VS Code的隐藏设置搞的鬼：

• 打开VS Code设置（快捷键Ctrl+,）
• 搜索files.exclude
• 检查列表里有没有包含你的images文件夹的规则，如果有，取消勾选该规则，就能正常看到文件夹内容了。

3. 核对文件名的大小写与扩展名 #

Windows系统不区分文件名大小写，但CRA用的webpack在编译时是严格区分的。比如你导入的是logo.jpg，但实际文件是Logo.jpg，就会导致资源找不到。

• 确保import语句里的文件名、扩展名和实际文件完全一致。

4. 备选方案：用public文件夹存放图片 #

如果你不想移动图片位置，也可以把images文件夹放到项目根目录的public文件夹下，然后在组件里通过process.env.PUBLIC_URL引用：

import React from "react";
import { Wrapper, Content, LogoImg, TMBDLogoImg } from "../Header/header.styles";

const Header = () => (
  <Wrapper>
    <Content>
      <LogoImg src={`${process.env.PUBLIC_URL}/images/logo.jpg`} alt="rmbd-logo"></LogoImg>
      <TMBDLogo src={`${process.env.PUBLIC_URL}/images/tmbd_logo.svg`} alt="tmbd-logo"></TMBDLogo>
    </Content>
  </Wrapper>
)

export default Header

这种方式不需要import图片，因为public文件夹里的资源会被直接复制到构建后的目录，不经过webpack打包。

你提到index.html里能正常显示图片，是因为index.html本身就在public文件夹下，它的相对路径是基于public目录的；而React组件里的import是webpack处理的，默认只识别src内的资源，这就是两者的核心差异啦。

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