javascript - 在 Reactjs 中导入 Src Css 文件中的公共(public)文件夹图像

Question

我需要从公用文件夹导入一些 Assets 。我可以在 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' 

Answer 1

我目前无法发表评论，所以我必须把它写成答案，你能试试吗

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

如果它不起作用就把它标记为无用然后去检查this你会在那里找到解决方案