在 Windows 上使用 url() 加载图像的 CSS 会导致路径混乱答案

【问题标题】：CSS loading image with url() on windows gets path messed up在 Windows 上使用 url() 加载图像的 CSS 会导致路径混乱
【发布时间】：2021-02-09 06:49:44
【问题描述】：

所以我有这个 Mountains.jpg，它位于我想在后台加载的项目的根文件夹中。

我的容器有style={{ backgroundImage: `url(${path.resolve("mountains.jpg")})` }}

我还有一个console.log(path.resolve("mountains.jpg"))，它在 Linux 上打印： /home/user/Documents/App/dist/linux-unpacked/mountain.jpg 并且图像加载正常！

然后我将它安装在 Windows 上并运行该应用程序。打印的路径是C:\Users\user\AppData\Local\Programs\app\mountains.jpg，我检查了它，并且图像在正确的位置。

然后我得到这个错误：

Failed to load resource: net::ERR_FILE_NOT_FOUND

file:///C:/UsersuserppDataLocalProgramsppmountains.jpg

这很奇怪。当url(path)解析路径时，路径似乎一团糟

如果有人知道解决此问题的方法，我将不胜感激。

【问题讨论】：

您是在反应还是电子中访问该图像？如果你使用的是 react.js，为什么不在组件中导入文件呢？
您使用完整路径而不是相对路径的任何原因？看到这个； w3schools.com/html/html_filepaths.asp
你应该先导入图片。 Import image from "../destination";并设置这样的样式。 style={{backgroundImage:`url(${image})`}}
@Dexterians 这是因为在 package.json 的构建中，我的目标是 extraFiles 中的图像文件，因此它们被复制到 dist 文件夹，问题是在构建 forlder 或 dist 文件夹中运行时，结构发生了变化有点所以图像的相对路径会发生变化。所以我使用了完整路径，所以在这两种情况下它都从根项目文件夹开始，然后从那里指向图像。
@development-ninja 谢谢！我尝试添加模块以将图像加载到 webpack 配置，然后导入图像，它工作正常！

标签： css reactjs webpack electron electron-builder

【解决方案1】：

我的图像在项目根文件夹，我的组件在src/Component.js。我使用了从组件到图像的相对路径，图像可以正常加载。

所以问题是，在我使用 electron-builder 并在 dist 文件夹中运行应用程序后，相对路径不再有效，因为该组件现在应该更深一层，正如 console.log(path) 向我展示的那样。

package.json 构建

"build": {
    "appId": "com.app",
    "files": [
      "build/**/**/*",
      "node_modules/**/*",
      "./main.js"
    ],
    "extraFiles": [
      {
        "from": ".",
        "to": ".",
        "filter": [
          "*.jpg",
          "*.png"
        ]
      }
    ],

所以我告诉 electron-builder 以根目录中的图像文件为目标并将它们复制到 dist 文件夹，但是图像的相对路径发生了变化。所以我使用了process.cwd() 的完整路径，所以在这两种情况下，它都从根项目文件夹开始，然后从那里指向图像。

但随着 windows 路径出现错误，我尝试了另一种方法，即从 package.json 中删除 "extraFiles:" 部分，然后添加 file-loader 模块 到 Webpack。

然后，按照其他人的建议，我添加了import image from '../mountains.jpg' 然后

现在它也可以在 Windows 上运行 :)

图像不会在根文件夹中，所以要让应用程序附带图像并在根文件夹中可用，extraFiles 仍然可以使用，以便复制图像。

【讨论】：