我的反应项目中的图像存在问题.事实上,我一直认为src属性的相对路径是建立在文件架构上的
这是我的文件架构:
components
file1.jsx
file2.jsx
file3.jsx
container
img
js
...
Run Code Online (Sandbox Code Playgroud)
但是我意识到路径是建立在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
Run Code Online (Sandbox Code Playgroud)
怎么可能解决这个问题?我希望在react-router处理的任何形式的路由中,所有图像都可以用相同的路径显示.
我正在构建一个小型反应应用程序,我的本地图像将无法加载.像placehold.it/200x200这样的图像加载.我想也许它可能是服务器的东西?github上的完整源代码.
这是我的App.js
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div className="home-container">
<div className="home-content">
<div className="home-text">
<h1>foo</h1>
</div>
<div className="home-arrow">
<p className="arrow-text">
Vzd?lání
</p>
<img src={"/images/resto.png"} />
</div>
</div>
</div>
);
}
}
export default App;
Run Code Online (Sandbox Code Playgroud)
index.js:
import React, { Component } from 'react';
import { render } from 'react-dom';
import { Router, Route, Link } from 'react-router';
import { createHistory } from 'history';
import App from './components/app';
let history …Run Code Online (Sandbox Code Playgroud)