React项目pages目录下组件无法访问images文件夹资源如何解决

直接存放在src目录下的组件可以正常访问images文件夹内的图片，但存放在pages文件夹下的组件无法访问该文件夹，修改多种相对引入路径都未生效。
项目结构参考：

异常组件代码：

import React from "react";
import TitleImg from "../images/title-text.png";
import eyes from "../images/eyes.png";

const Sad = () => {
  return (
    <>
      <img src={TitleImg} alt="the-sad-guys" />
      <img className="w-3/6" src={eyes} alt="eyes" />
    </>
  );
};

export default Sad;

核心问题是相对路径层级计算错误。
从项目结构可知images文件夹和pages文件夹是同级目录，都位于src目录下。当前代码写的../images/xxx.png只会向上回退一级目录：

• 如果Sad组件直接放在src/pages/目录下，向上回退一级刚好到src，路径理论上生效
• 如果pages目录下还有按页面名拆分的子文件夹（比如实际路径为src/pages/Sad/Sad.jsx），向上回退一级只会到src/pages/目录，根本访问不到同级的images文件夹，就会报资源找不到的错误

• 方法1：修正相对路径
  先确认组件的实际存放层级，每多一层子文件夹就多写一个../回退到src目录再访问images。比如组件在src/pages/Sad/Sad.jsx时，引入路径改为：

  import TitleImg from "../../images/title-text.png";
  import eyes from "../../images/eyes.png";
  

• 方法2：配置根路径绝对引入（推荐，无需计算层级）
  绝大多数React项目脚手架（CRA、Vite）都支持基于src目录的绝对引入，不管组件嵌套多深，都可以直接写从src出发的路径，不会出现层级算错的问题：

  import TitleImg from "images/title-text.png";
  import eyes from "images/eyes.png";
  

  如果默认不支持该写法，在项目根目录新建jsconfig.json（JS项目）或tsconfig.json（TS项目），添加如下配置后重启开发服务即可：

  {
    "compilerOptions": {
      "baseUrl": "src"
    },
    "include": ["src"]
  }
  

• 方法3：静态资源放public目录
  把images文件夹移动到项目根目录的public文件夹下，不需要import导入，直接在img标签的src属性写根路径即可访问：

  <img src="/images/title-text.png" alt="the-sad-guys" />
  <img className="w-3/6" src="/images/eyes.png" alt="eyes" />
  

  该方式适合不需要经过构建工具压缩、哈希处理的固定静态资源。

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