如何在React TypeScript中无需import/require通过路径使用图片？

直接通过项目的public目录存放图片，无需使用import或require即可动态传入路径显示图片，步骤如下：

1. 存放图片到public目录
   把需要展示的图片放到项目根目录下的public文件夹中，可创建子目录分类管理，示例结构：

public/
└── assets/
    └── images/
        ├── cat.png
        └── dog.png

2. 定义图片路径映射
   在你的.ts映射文件中，直接写入相对于public根目录的绝对路径：

// imageMap.ts
export const imageMap = {
  "可爱猫咪": "/assets/images/cat.png",
  "憨厚小狗": "/assets/images/dog.png"
};

3. 组件中直接使用路径
   组件接收title和imgPath属性后，直接将imgPath赋值给img标签的src属性：

// ImageCard.tsx
type ImageCardProps = {
  title: string;
  imgPath: string;
};

export default function ImageCard({ title, imgPath }: ImageCardProps) {
  return (
    <div>
      <h2>{title}</h2>
      <img src={imgPath} alt={title} />
    </div>
  );
}

4. 调用组件传入动态路径
   根据条件从映射中取出对应条目传入组件：

// 调用示例
import { imageMap } from './imageMap';

function App() {
  const selectedKey = "可爱猫咪"; // 可根据业务条件动态切换
  return <ImageCard title={selectedKey} imgPath={imageMap[selectedKey]} />;
}

原理说明 #

public是大多数前端构建工具（如Create React App、Vite）约定的静态资源目录，该目录下的文件会被直接复制到构建输出目录，不会被模块打包工具处理。浏览器可通过URL直接访问这些资源，因此直接传入路径字符串即可正常加载图片，完全适配动态场景，后续映射变更只需修改映射文件，无需调整组件代码。

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