Electron 在编译版本中不显示图像

Posted 2023-03-22

【中文标题】Electron 在编译版本中不显示图像

【英文标题】：Electron does not show images in compiled version

【发布时间】：2021-10-03 13:27:28

【问题描述】：

我正在尝试解决一个关于电子的问题。

它不显示任何来自css文件的图像，另一方面，它可以在以前的版本中正常显示，无需编译应用程序。

我的项目是如何组织的。

ma​​in.js文件（我隐藏了一些无用的信息“宽度、高度...”）

 function createWindow () 
  win = new BrowserWindow(
    //...
    webPreferences: 
        nodeIntegration: true,
        contextIsolation: false,
        enableRemoteModule: true,
        preload: path.join(__dirname, 'preload.js')
    
  )
  win.loadFile('index.html')
 

  app.whenReady().then(() => 
    createWindow()
  )

index.html这里有我的样式文件，

<link rel="stylesheet" type="text/css" href="./css/styles.css">

在它的定义中我们有：

.class
background-image: url('file:///logos/logo_gc.png');

preload.js (não há nada)

我测试了几种解决方案，例如：

Electron does not show the images not stored when compiling the application

我尝试将导入放入所有可能的文件中，但什么也没有。

Version electron: 12.0.15

Compiler: electron-packager

Command: electron-packager 'path' --overwrite --asar --platform=win32 --arch=x64 --prune=true --out=release-builds --version-string.CompanyName=CE --version-string .FileDescription=CE --version-string.ProductName="Infosac"

【参考方案1】：

打包应用程序总是与文件路径混淆。 只需使用相对文件路径。

.class
background-image: url('../logos/logo_gc.png');

请记住，无论您的 html 文件在哪里，它都与您的 css 文件路径相关