Angular Electron 19打包应用无法访问图片资源的配置咨询

方案一：修正Angular路径与构建配置 #

开发环境下的相对路径在打包后可能失效，建议改用Angular构建后的绝对路径：

1. 确认angular.json的build.options.assets配置包含src/assets，确保构建时assets目录被同步到dist文件夹：

"build": {
  "options": {
    "assets": [
      "src/favicon.ico",
      "src/assets"
    ]
  }
}

2. 修改HomeComponent模板中的图片路径为绝对路径：

<img src="/assets/mobile.png" height="100" width="auto"/>

3. 重新执行Angular构建命令ng build，再用electron-builder打包。

方案二：将assets放在asar包外（适合需要动态修改资源的场景） #

如果需要让assets目录不被打包进asar，可通过electron-builder的extraResources配置实现：

1. 修改electron-builder.json，添加extraResources配置，将src/assets复制到打包后的resources目录：

{
  "asar": true,
  "directories": {
    "output": "release/"
  },
  "files": [
    "**/*",
    "!**/*.ts",
    "!*.map",
    "!package.json",
    "!package-lock.json",
    {
      "from": "../dist/你的项目名",
      "filter": ["**/*"]
    }
  ],
  "extraResources": [
    {
      "from": "../src/assets",
      "to": "assets"
    }
  ]
}

注意：将../dist/你的项目名替换为实际Angular构建后的dist子目录（默认是项目名称）。

2. 在Angular组件中通过Electron API获取资源路径：
   • 首先在主进程（main.js）中启用必要的web配置（Electron 14+需手动开启remote模块）：

   const { BrowserWindow, app } = require('electron');
   
   function createWindow() {
     const mainWindow = new BrowserWindow({
       webPreferences: {
         nodeIntegration: true,
         contextIsolation: false,
         enableRemoteModule: true
       }
     });
     mainWindow.loadURL(`file://${__dirname}/../dist/你的项目名/index.html`);
   }
   
   app.whenReady().then(createWindow);
   

   • 在HomeComponent中获取图片路径：

   import { Component } from '@angular/core';
   const { app } = require('electron').remote;
   import { join } from 'path';
   
   @Component({
     selector: 'app-home',
     templateUrl: './home.component.html',
     styleUrls: ['./home.component.css']
   })
   export class HomeComponent {
     imagePath = join(app.getAppPath(), '../assets/mobile.png');
   }
   

   • 修改模板绑定路径：

   <img [src]="imagePath" height="100" width="auto"/>
   

方案三：检查electron-builder的files配置 #

确保dist目录被正确包含：

• 确认files配置中的from路径指向Angular构建后的实际目录，比如如果Angular构建产物在dist/my-app，则配置应为：

{
  "from": "../dist/my-app",
  "filter": ["**/*"]
}

• 重新执行打包命令，确保dist下的assets文件夹被正确打包进asar包。

内容的提问来源于stack exchange，提问作者Arco Voltaico