Question

我有父组件在指定路径显示图像（注意：图像已保存在我的项目中）。该路径可选地可以具有附加参数。如果

例如，如果html路径为：

，则会显示图片（image）

    www.mysite.com/myPath

如果html路径为：

，则显示组件，但图片已损坏（broken image）

    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;

我认为问题不在于我的router.js文件，因为当html路径中应用了filter时，该组件仍会显示（图像刚刚被破坏，），但是我提供它以防万一我误解了一些东西。

我的组件：

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

我看过并试过以下一些，但运气不好：

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

是否有人知道图片显示的原因，但前提是没有额外的html参数？

非常感谢。

Answer 1

{"img/x.png"}没有访问root的原因？例如{"/img/x.png"}或将您的env域设置为全局变量并在其中添加，否则您将查看为img目录命中的每个目录。

仅在提供可选的html参数时才显示图像（但是另外显示）

1 个答案: