图像路径未在从 url 获取参数的组件内解析

Question

我有一个通过 url 获取参数并使用 useParams() 的组件。在这个组件中我想显示一个图像，但是图像没有显示。当我禁用向该组件发送 url 参数的能力时，会显示图像。图片位于 public 文件夹中。

不发送参数:

//App.js
          <BrowserRouter>
            <Routes>
              <Route path='/somePath' element={ <SomeComponent/>}/>
            </Routes>
          </BrowserRouter>


//SomeComponent.js
    export default function SomeComponent() {
      return (
        <img src='butterfly.png'/>
      )
    }

带参数：

//App.js     
          <BrowserRouter>
            <Routes>
              <Route path='/somePath/:someParameter' element={ <SomeComponent/>}/>
            </Routes>
          </BrowserRouter>


//SomeComponent.js
    export default function SomeComponent() {
        const { someParameter } = useParams();
      return (
        <img src='butterfly.png'/>
      )
    }

沙盒示例 https://codesandbox.io/s/nostalgic-colden-16rfb0?file=/src/App.js

Answer 1

应该

<img src='/butterfly.png'/>

如果您不添加“/”，您的图片 URI 将是：/somePath/:someParameter/butterfly.png'，这是错误的

图像路径未在从 url 获取参数的组件内解析

Image paths are not resolved within component that gets parameters from the url

reactjs

react-router-dom

react-hooks