在Windows上使用url加载CSS的图像会弄乱路径

如何解决在Windows上使用url加载CSS的图像会弄乱路径

所以我有这个mountain.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)

解析时，路径似乎一团糟

如果有人知道解决方法，我将很感激。

解决方法

我的图片位于项目根文件夹中，而我的组件位于src/Component.js中。我使用了从组件到图像的相对路径，图像可以很好地加载。

所以问题是，在我使用了电子生成器并在dist文件夹中运行该应用程序之后，相对路径不再有效，因为该组件现在据推测要深一层，如console.log(path)向我展示的那样

package.json构建

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

因此，我告诉电子制造商将根目录下的图像文件作为目标并将其复制到dist文件夹中，但是图像的相对路径会更改。因此，我使用了process.cwd()的完整路径，因此在两种情况下，它都从根项目文件夹开始，然后从那里指向图像。

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

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

<Component style={{ backgroundImage: `url(${image})` }}></Component>

现在它也可以在Windows上使用：）

该图像将不在根文件夹中，因此要使该图像随应用程序一起提供并在根文件夹中可用，extraFiles仍可以使用，以便将图像复制过来。 / p>