我在我的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,所有的图像可以显示相同的路径。
有些老答案行不通,有些答案不错,但不能解释主题,总结如下:
如果image在'public'目录中
例如:\ \ \ a.png图表
在html中:
<img id="imglogo" src="/charts/logo.svg" />
在JavaScript中:
动态地在新img中创建图像:
var img1 = document.createElement("img");
img1.src = 'charts/a.png';
动态设置image为现有的img, id为'img1':
document.getElementById('img1').src = 'charts/a.png';
如果image在'src'目录下:
例如:\ src \ logo.svg
在JavaScript中:
import logo from './logo.svg';
img1.src = logo;
在jsx:
<img src={logo} />
有些老答案行不通,有些答案不错,但不能解释主题,总结如下:
如果image在'public'目录中
例如:\ \ \ a.png图表
在html中:
<img id="imglogo" src="/charts/logo.svg" />
在JavaScript中:
动态地在新img中创建图像:
var img1 = document.createElement("img");
img1.src = 'charts/a.png';
动态设置image为现有的img, id为'img1':
document.getElementById('img1').src = 'charts/a.png';
如果image在'src'目录下:
例如:\ src \ logo.svg
在JavaScript中:
import logo from './logo.svg';
img1.src = logo;
在jsx:
<img src={logo} />