Bilder werden nicht nur angezeigt, wenn optionale HTML-Parameter bereitgestellt werden (aber sonst zeigen)

Question

Ich habe Elternkomponente, die ein Bild an einem angegebenen Pfad zeigt (Hinweis: das Bild ist bereits in meinem Projekt gespeichert). Dieser Pfad kann optional zusätzliche Parameter haben. Wenn die

Zum Beispiel kann die Bild wird angezeigt (image), wenn der HTML-Pfad ist:

www.mysite.com/myPath 

Die Komponente angezeigt wird, aber Bild wird (broken image), wenn der HTML-Pfad aufgebrochen ist:

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; 

Ich glaube nicht, das Problem mit meinem router.js Datei entsprechen, da die Komponente immer noch zeigt, wenn ein filter im HTML-Pfad angelegt wird (das Bild ist nur gebrochen, ), aber ich sende nur für den Fall, dass ich etwas falsch verstehe.

Meine Komponente:

// 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; 

ich ausgesehen haben und versucht, die einige der folgenden, aber mit etwas Glück:

• React won't load local images
• Dynamically Add Images React Webpack

I denke thes Die Unterschiede liegen darin, dass es sich hauptsächlich um Probleme handelt, die damit zusammenhängen, dass Bilder überhaupt nicht angezeigt werden können. Ich kann das Bild anzeigen, aber nur wenn der optionale html-Parameter nicht gesetzt ist.

Weiß jemand, warum das Bild angezeigt wird, aber nur, wenn es keinen zusätzlichen HTML-Parameter gibt?

Vielen Dank.

Answer 1

Warum kann {"img/x.png"} nicht auf root zugreifen? Wie {"/img/x.png"} oder richten Sie Ihre env-Domäne als eine globale Variable und fügen Sie das dort hinzu, da Sie sonst in jedes Verzeichnis schauen, das Sie für ein IMG-Verzeichnis treffen.