如何在 React.js 中使用 React Router 解决图像路径问题？

React.js 中的 Img 路径解析

在 React.js 中， 的 src 属性是元素应包含图像的 URL。然而，在某些情况下，相对路径似乎没有被正确解析，特别是在 React Router 的上下文中。

考虑以下文件结构：

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

在 file1.jsx 中，以下代码用于显示图像：

localhost/details/2
<img src="../img/myImage.png" /> <!-- works -->

localhost/details/2/id
<img src="../img/myImage.png" /> <!-- doesn't work -->

正如您所观察到的，相对路径在第一种情况下有效，但在第二种情况下无效。这是因为相对路径是根据 URL 解析的，而不是文件架构。

为了确保无论路径如何，图像都能正确显示，一种解决方案是使用以下语法导入图像：

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={&quot;logo&quot;}/> 
        )  
    }
}

通过导入图像，您可以确保它是捆绑资源，并且无论当前路由如何，都可以在所有组件中使用。

以上是如何在 React.js 中使用 React Router 解决图像路径问题？的详细内容。更多信息请关注PHP中文网其他相关文章！