在 Reactjs 中的 Src Css 文件中导入公共文件夹图像答案

【问题标题】：Importing Public Folder Images In Src Css Files In Reactjs在 Reactjs 中的 Src Css 文件中导入公共文件夹图像
【发布时间】：2021-06-18 08:43:59
【问题描述】：

我需要从公共文件夹中导入一些资产。我可以在 html 中轻松完成；它不会给出错误。但是，我不能用 css url() 方法做到这一点。我需要这样做，因为 react 将小于 10Kb 的图像编码为 base 64，并使用该编码文本而不是图像路径。正如我在一些文章中所读到的，这对性能没有好处，因为 css 是一种渲染阻塞资源，并且添加到它的文本中会导致解析时间更长。

这是我的文件夹结构：

我的.scss 文件在src/components 内，这就是我尝试导入图像的方式：

background-image: url("/media_assets/img/footer-xsm.png");

还有我的 package.json：

{
  "name": "roomeet",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@glidejs/glide": "^3.4.1",
    "@loadable/component": "^5.14.1",
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.2",
    "@testing-library/user-event": "^12.2.2",
    "bootstrap": "^4.5.3",
    "js-cookie": "^2.2.1",
    "node-sass": "^4.14.1",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-lazyload": "^3.1.1",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.0",
    "source-map-explorer": "^2.5.2",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "analyze": "source-map-explorer 'build/static/js/*.js'",
    "bundle-report": "webpack-bundle-analyzer --port 4200 dist/stats.json"
  },
}

编辑：这是它给出的错误：

Error: Can't resolve '../media_assets/img/footer-xsm.png' in 'C:\VSCode Projects\rmt_cln\src\components'

【问题讨论】：

标签： javascript css reactjs sass

【解决方案1】：

我目前无法发表评论，所以我不得不写它作为答案，你能试试吗

background-image: url("./media_assets/img/footer-xsm.png");

如果它不起作用，只需将其标记为无用并去检查 this 你会在那里找到解决方案

【讨论】：

好吧，这不起作用。但我不会标记您的答案，因为您提供的链接确实包含有用的解决方案。