Menu
I am using react-router for the first time and I am having a little problem with my project. React-router is changing the url fine, but then my images are not getting loaded. I believe it is because the base url changes, for example it works when the link it's like this: http://localhost:3000/f0287893b2bcc6566ac48aa6102cd3b1.png but it doesn't when it's like this http://localhost:3000/module/f0287893b2bcc6566ac48aa6102cd3b1.png. Here is my router code:
import { Router, Route, browserHistory, IndexRoute } from 'react-router'
import { syncHistoryWithStore } from 'react-router-redux'
import { Provider } from 'react-redux'
import ReactDOM from 'react-dom'
import React from 'react'
import App from './containers/App'
import configure from './store'
import Home from './components/home';
import Module from './components/module-page/module';
import Login from './components/login/login';
const store = configure();
const history = syncHistoryWithStore(browserHistory, store);
ReactDOM.render(
<Provider store={store}>
<Router history={history}>
<Route path="/" component={App}>
<IndexRoute component={Login} />
<Router path="/home" component={Home}/>
<Router path="/module(/:module)" component={Module}/>
</Route>
</Router>
</Provider>,
document.getElementById('root')
)
this is where the link is triggered:
import React, { Component } from 'react';
import { ROUTE_MODULE } from '../../constants/Routes';
import { Link } from 'react-router';
import styles from './side-bar-items.css';
import { Navbar, Nav, NavItem, Collapse } from 'react-bootstrap/lib'
import FontAwesome from 'react-fontawesome';
class SideBarItems extends Component {
constructor(prop) {
super(prop);
this.state = { open: false };
}
render() {
return (
<Navbar.Collapse>
<Nav>
<NavItem className={styles.navItem} eventKey={1}>
<FontAwesome className={styles.navItemIcon} name='globe' size="lg"/>
<span className={styles.navItemIconText}>Dashboard</span>
</NavItem>
<NavItem onClick={this.showModules} className={`${styles.navItem} ${styles.itemModule}`}>
<FontAwesome className={styles.navItemIcon} name='clone' size="lg"/>
<span className={styles.navItemIconText}>Modules</span>
<Collapse in={this.state.open}>
<div className={styles.collapse}>
<div className={styles.module}>
<Link to="/module/moduleCode=2999">Programming III</Link>
</div>
</div>
</Collapse>
</NavItem>
</Nav>
</Navbar.Collapse>
)
}
showModules = () => {
this.setState({ open: !this.state.open })
}
}
export default (SideBarItems);
This is where I import the image:
import React, { Component } from 'react';
import Image from 'react-bootstrap/lib/Image'
import avatar from '../../images/avatar.jpg';
import styles from './user-image.css';
class UserImage extends Component {
render() {
return (
<div className={styles.userContainer}>
<Image className={styles.avatar} src={avatar} rounded />
<span className={styles.userName}>Hello, Daniel</span>
<span className={styles.userCourse}>SEC, Software Engineering</span>
</div>
)
}
}
export default (UserImage);
this is how the website looks when I click on the link
954
To use an image as a link in React, wrap the image in an <a> tag or a Link tag if using react router. The image will get rendered instead of the link and clicking on the image will cause the browser to navigate to the specified page. Copied!
To display an image from a local path in React:Download the image and move it into your src directory. Import the image into your file, e.g. import MyImage from './thumbnail. webp' . Set the src prop of the image element to the imported image, e.g. <img src={MyImage} alt="horse" /> .
What worked for me was to set the HTML base reference to the web root
<head>
<base href="/">
</head>
this also solved some other problems with the router when refreshing the page at a predetermined route.
200
To make sure that the image is taken from the root of the server and not the relative directory of the current route, add a / in front of the src:
<Image className={styles.avatar} src={`/${avatar}`} rounded />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
