Javascript 在Reactjs中导入Src Css文件中的公用文件夹图像

我需要从公用文件夹导入一些资产。我可以用html轻松地完成它；它不会出错。 然而，我不能用css

url（）

方法来实现它。 我需要这样做，因为react将小于10Kb的图像编码为64进制，并使用该编码文本而不是图像路径。 正如我在一些文章中所读到的，这对性能没有好处，因为css是一种渲染阻塞资源，添加到它的文本中会使解析变得更长

以下是我的文件夹结构：

我的

.scss

文件位于

src/components

中，这就是我尝试导入图像的方式：

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

和my 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' 

---

我目前无法发表评论，所以我必须写下来作为回答，你能试试吗

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

---

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

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