使用 react-router-dom 时如何从 css 文件访问公共文件夹中的图像？

Question

我一直在开发一个登录程序来练习我的 Python、MongoDB 和 CSS。

我正在使用 react-router-dom 来更改 URL，只要用户在保持 redux 的同时转到另一个页面（我的意思是，这就是重点）。但是，我也在使用 CSS（位于 src 文件夹中，每个都放在它所针对的组件旁边的 styles.css 文件中），并且我想在 CSS 中包含一个具有低不透明度的线性渐变的背景图像超过它。我的 CSS 代码如下所示：

background-image: linear-gradient(to bottom right, rgba(var(--color-example-1), .8), rgba(var(--color-example-2), .8)), url(/images/example-image.png);

我的 App.js 文件如下所示：

// ABSOLUTES
import React from 'react';
import { Router, Route, Switch } from 'react-router-dom';

// PAGES
import ChangePasswordPage from './pages/ChangePasswordPage';
import ForgotPasswordPage from './pages/ForgotPasswordPage';
import LoginPage from './pages/LoginPage';
import SignedInPage from './pages/SignedInPage';
import SignUpPage from './pages/SignUpPage';

// VARIABLES
import { history } from './variables';

// STYLES
import './styles.css';

class App extends React.Component {
  render() {
    return (
      <div className="app">
        <Router history={history}>
          <Switch>
            <Route exact path='/login'>
              <LoginPage />
            </Route>

            <Route exact path='/signup'>
              <SignUpPage />
            </Route>

            <Route exact path='/'>
              <SignedInPage />
            </Route>

            <Route exact path='/forgotpassword'>
              <ForgotPasswordPage />
            </Route>

            <Route exact path='/changepassword'>
              <ChangePasswordPage />
            </Route>
          </Switch>
        </Router>
      </div>
    );
  }
}

export default App;

问题在于，它不是从公共文件夹获取图像，而是获取 App.js，即使它与任何路径参数都不匹配。有什么方法可以访问公共文件夹而不是 react-router-dom？

Answer 1

如果我理解正确，那么它归结为文件路径。我假设您的文件结构类似于基本的 create-react-app，如下所示：

main folder
-- public folder
----> images folder
------>> example-image.png
-- src folder
----> App.js
----> styles.css

在这种情况下，而不是引用

/images/example-image.png

这是从同一个目录中提取的，您想从 styles.css 文件返回 2 个层次结构到主文件夹，然后沿着层次结构向下进入图像的公共文件夹。所以你将从 styles.css -> src 文件夹 -> 主文件夹 -> 公共文件夹 -> 图像文件夹 -> 你的图像。

../../public/images/example-image.png

"../" 表示在层次结构中向上/向后移动一级。 “./”或“/”表示当前级别。这对您的问题有帮助吗？