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={"logo"}/>
)
}
}通过导入图像，您可以确保它是捆绑资源，并且无论当前路由如何，都可以在所有组件中使用。
以上是如何在 React.js 中使用 React Router 解决图像路径问题？的详细内容。更多信息请关注PHP中文网其他相关文章！
