In my parent component, there is an image displayed at a specific path (note: the image is already stored in my project). This path can optionally have additional parameters. If the
For instance, The image is visible (image) when the HTML path is:
www.mysite.com/myPath
The component is visible but the image appears as broken (broken image) when the HTML path is:
www.mysite.com/myPath/someFilterForThisPage
Router
// Libraries
import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { browserHistory } from 'react-router';
// Components
import Home from './containers/Home';
import NotFound from './components/NotFound';
import MyComponent from './components/MyComponent';
// Redux
import { Provider } from 'react-redux';
import {createStore} from 'redux';
import allReducers from './reducers';
const store = createStore(
allReducers,
window.devToolsExtension && window.devToolsExtension()
);
// Routes
const routes = (
<Router history={browserHistory}>
<div>
<Provider store={store}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/myPath/:filter?" component={MyComponent} />
<Route component={NotFound} />
</Switch>
</Provider>
</div>
</Router>
);
export default routes;
I don't believe the issue lies with my router.js file, as the component still displays when a filter is applied in the HTML path (only the image appears broken, https://i.sstatic.net/yPxLS.png). Nevertheless, I am including it in case there might be a misunderstanding.
My Component:
// React
import React from 'react';
class MyComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
<div>
<img src={"img/x.png"} id="someId" alt=""/> // ISSUE
// ...
// some divs that show/don't based on the filter of the HTML path
// ...
</div>
}
}
export default MyComponent;
I have explored and attempted some of the following options, with minimal success:
- React won't load local images
- Dynamically Add Images React Webpack
I believe these are different issues, mainly concerning the inability to display images at all. I am capable of displaying the image, but only when the optional HTML parameter is not set.
Any insights on why the image appears when there is no extra HTML parameter?
Thank you.