1

I have parent component that shows an image at a specified path (note: the image is already saved in my project). This path optionally can have additional parameters. If the

For example, The image is displayed (image) if the html path is:

    www.mysite.com/myPath

The component is displayed but image is broken (broken image) if 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 think the issue is with my router.js file since the component still shows when a filter is applied in the html path (the image is just broken, broken), but I am providing it just in case I am misunderstanding something.

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 looked at and tried some of the following, but with little luck:

I think these are different because these are mainly issues related to being unable to display images at all. I am able to display the image, but only when the optional html parameter is not set.

Does anyone know why the image is showing, but only if there is no extra html parameter?

Many thanks.

Rbar
  • 3,740
  • 9
  • 39
  • 69
  • Are you able to strip out just the source you need? You can use regex to get just the image url without the extra params at the end. – Chase DeAnda Jun 19 '17 at 21:01
  • Stripping out just that source would likely not be a suitable solution because this same issue is happening for all images in the `img` folder where that image is located, so this solution would mean stripping out every single image used throughout the project (which would be a significant number) – Rbar Jun 19 '17 at 21:12
  • Ah okay, it sounded like you were working with dynamic image paths. So these are images that are already saved in your project? – Chase DeAnda Jun 19 '17 at 21:18
  • @ChaseDeAnda yes, the images are already saved in my project (good point to clarify). I have updated the question to contain that point as well – Rbar Jun 19 '17 at 21:40

1 Answers1

2

Any reason why {"img/x.png"} is not accessing root? Such as {"/img/x.png"} or setup your env domain as a global variable and add that in there otherwise you are looking inside every directory you hit for an img directory.

Adrianopolis
  • 1,272
  • 1
  • 11
  • 15
  • Beautiful! I had tried `{"./img/x.png"}` (the way I do for `import` statements in React) but it didn't solve the issue... your solution on the other hand did! Logical, simple solution. Thank you! – Rbar Jun 19 '17 at 23:07