title: Image paths are not resolved within component that gets parameters from the url
body: <p>I have a component that gets parameters via the url, and uses useParams(). In this component I want to display an image, but the image is not displayed.
  When I disable the ability to send url parameters to this component, the image is displayed.
  The image is in the public folder.</p>
  <p><strong>Without sending params:</strong></p>
  <pre><code>//App.js
            &lt;BrowserRouter&gt;
              &lt;Routes&gt;
                &lt;Route path='/somePath' element={ &lt;SomeComponent/&gt;}/&gt;
              &lt;/Routes&gt;
            &lt;/BrowserRouter&gt;
  
  
  //SomeComponent.js
      export default function SomeComponent() {
        return (
          &lt;img src='butterfly.png'/&gt;
        )
      }
  </code></pre>
  <p><strong>With parameters:</strong></p>
  <pre><code>//App.js     
            &lt;BrowserRouter&gt;
              &lt;Routes&gt;
                &lt;Route path='/somePath/:someParameter' element={ &lt;SomeComponent/&gt;}/&gt;
              &lt;/Routes&gt;
            &lt;/BrowserRouter&gt;
  
  
  //SomeComponent.js
      export default function SomeComponent() {
          const { someParameter } = useParams();
        return (
          &lt;img src='butterfly.png'/&gt;
        )
      }
  </code></pre>
  <p><strong>Sandbox example</strong>
  <a href="https://codesandbox.io/s/nostalgic-colden-16rfb0?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/nostalgic-colden-16rfb0?file=/src/App.js</a></p>