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

Posted 2023-02-22

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

【英文标题】：How do you access images in the public folder from a css file while using react-router-dom?

【发布时间】：2020-10-23 14:13:37

【问题描述】：

我一直在开发一个登录程序来练习我的 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？

【参考方案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

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

【讨论】：

这不起作用，因为 (1) 相对引用会导致 CSS 文件出错（至少在 React 中会出错；我不知道纯 html）和 (2) 你可以'不从 src 文件夹中引用公用文件夹；这与它们在页面上的呈现方式有关。

我明白了，这个帖子有帮助吗？他们似乎试图做和你一样的事情。 ***.com/questions/57162841/…

我想我可以使用这些解决方案，但是它们涉及很多额外的代码；我宁愿使用更简单的解决方案。