Javascript 图像不'；t仅在提供可选html参数时显示（但不显示其他参数）

我有一个在指定路径上显示图像的父组件（注意：该图像已保存在我的项目中）。此路径可以选择具有其他参数。如果

例如，如果html路径为：

    www.mysite.com/myPath

    www.mysite.com/myPath/someFilterForThisPage

组件将显示，但如果html路径为：

    www.mysite.com/myPath

    www.mysite.com/myPath/someFilterForThisPage

路由器

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

我已经研究并尝试了以下一些方法，但运气不佳：

我认为这些是不同的，因为这些主要是与根本无法显示图像有关的问题。我能够显示图像，但只有在未设置可选html参数的情况下

只有在没有额外的html参数的情况下，有人知道图像显示的原因吗？

---

非常感谢。

为什么

{“img/x.png”}

没有访问根目录？例如

{”/img/x.png“}

或将您的env域设置为全局变量，并将其添加到其中，否则您将在您找到的每个目录中查找img目录。

您是否能够只提取所需的源代码？您可以使用regex仅获取图像url，而不在末尾添加额外的参数。仅剥离该源可能不是合适的解决方案，因为该图像所在的

img

文件夹中的所有图像都会出现相同的问题，所以这个解决方案将意味着剥离整个项目中使用的每一个图像（这将是一个重要的数字）啊，好吧，听起来像是在处理动态图像路径。那么这些图像已经保存在你的项目中了？@ChaseDeAnda是的，这些图像已经保存在我的项目中了（澄清这一点很好）。我已经更新了这个问题，把这一点说得很漂亮！我曾经尝试过

{./img/x.png}

（我在React中导入

语句的方式），但没有解决问题。。。另一方面，你的解决方案成功了！逻辑简单的解决方案。非常感谢。