reactjs - 从嵌套路由访问时， react 应用程序从错误的文件路径加载资源

Question

我的应用程序的结构如下:

src
 assets
  corpse.png
 components
  Books.js
  Corpse.js

在 Books.js 和 Corpse.js 中都有以下行:import CorpseImage from 'assets/corpse.png'。该图像仅在 Books.js 上加载，并且在后者上损坏。检查 img 文件路径显示发生了什么，但我不确定为什么。

Books.js img 文件路径:/static/media/corpse.2a3d71bf.png

Corpse.js img 文件路径:/books/static/media/corpse.2a3d71bf.png

App.js 看起来像这样:

<Route exact path='/books/' component={Books} />
<Route path='/books/corpse' component={Corpse} />

我在我的 jsconfig.json 根目录中设置了 src:

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

如何将资源导入到 /books/corpse 子路径中？

Answer 1

只需使用相对路径即可导入图像:

import CorpseImage from '../assets/corpse.png'

在 Books.js 和 Corpse.js 组件中。

假设目录结构如下:

src
 assets
  corpse.png
 components
  Books.js
  Corpse.js

这是docs .