我在我的react项目上的图像有一些问题。事实上,我一直认为src属性的相对路径是建立在文件体系结构上的

下面是我的文件架构:

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

然而,我意识到路径是建立在url上的。在我的一个组件(例如file1.jsx)中,我有这个:

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

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

怎么解决这个问题呢?我想在任何形式的路由处理的react-router,所有的图像可以显示相同的路径。


当前回答

我用create-react-app创建了我的应用程序,如果我想动态改变我的image src,我使用require指令:

export const MyComponent = () => {
  const [myImg, setMyImg] = useState(require('./path/to/my/img'));

  const handleClick = () => {
    setMyImg(require('./path/to/other/img'));
  }

  return (
    <div>
      <img src={myImg} alt='myImg' />
      <button onClick={handleClick}>Click me!<button/>
    <div>
  )
}

其他回答

如果你使用create-react-app来创建项目,那么你的公共文件夹是可访问的。所以你需要在公共文件夹中添加你的图像文件夹。

公共/图像/

<img src=“/images/logo.png” />

如果图像放在src文件夹中,请使用以下方法:

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

一位朋友向我展示了如何做到这一点:

".当请求图像的文件(例如,"example.js")在文件夹树结构中与文件夹"images"在同一层时,/"工作。

在create-react-app中,图像的相对路径似乎不起作用。相反,你可以导入一个图像:

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

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

如果你的页面url包含多个/,那么在src中返回/ count - 1次。

例如页面url http://localhost:3000/play/game/,那么src url必须是../your-image-folder/image-name。你的your-image文件夹必须在公共文件夹中。