React项目编译报错：无法解析图片路径，求技术支持

编译失败错误信息：

Module not found: Error: Can't resolve ' ../asset/intro.jpg' in 'C:\my-app\src\components'
ERROR in ./src/components/HeroImg.js 7:0-43
Module not found: Error: Can't resolve ' ../asset/intro.jpg' in 'C:\my-app\src\components'

webpack compiled with 1 error

HeroImg.js 代码 #

import "./HeroStyles.css";
import React from 'react';
import {Link} from "react-router-dom";
import IntroImg from " ../asset/intro.jpg";

const HeroImg = () => {
  return (
      <div className="hero" >
       <div className="mask">
        <img className="into-img" src={IntroImg} alt="introimage"/>
       </div>

       <div className="content">
         <p>HI, I'M A FREELANCER.</p>
         <h1>React Developer</h1>
         <div>
          <Link to="/project" className="btn">Projects</Link>
          <Link to="/contact" className="btn btn-light">Contact</Link>

         </div>

       </div>
      </div>
  );
};
export default HeroImg

当前文件夹层级 #

-src
-asset
   -intro.jpg

排查与解决步骤 #

• 移除路径前的空格：import语句里" ../asset/intro.jpg"的路径开头多了一个空格，webpack会将其视为路径的一部分，导致找不到文件。修正为：

  import IntroImg from "../asset/intro.jpg";
  

• 确认路径层级是否正确：从描述的文件夹结构看，asset与src同级，而HeroImg.js在src/components下，需要向上跳转两级目录才能访问到asset，所以正确路径应为../../asset/intro.jpg。
  完整项目结构参考：

  my-app/
  ├─ src/
  │  └─ components/
  │     └─ HeroImg.js
  └─ asset/
     └─ intro.jpg
  

• 检查文件名大小写：Windows系统文件名不区分大小写，但webpack编译时会严格匹配，确认图片文件名是intro.jpg，无大小写差异。

• require语句的正确用法：如果尝试用require解决，需确保路径正确，写法如下：

  const IntroImg = require("../../asset/intro.jpg").default;
  

  或直接在img标签中使用：

  <img className="into-img" src={require("../../asset/intro.jpg")} alt="introimage"/>
  

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