如何使用电子、反应和电子生成器在生产中显示图像

如何解决如何使用电子、反应和电子生成器在生产中显示图像

我对电子非常陌生，我有一个 React + Electron 应用程序，我想用电子构建器打包它。但问题是应用打包后图片不显示。

1.文件夹结构

---node modules/
|
---build/
|
---dist/
|
---src/
|
---public/
|   |
|   ---assets/
|   |  |
|   |  ---images/  
|   |
|   ---electron.js
|   |
|   ---favicon.ico
|   |
|   ---index.html
|   
---package.json

2.我如何在开发中访问图像

我在 public/assets/images 中有图片

要在我的代码中访问它，我会这样做：

import MyImage from "assets/images/my_image.png"

export function Image() {
   return (<img src={MyImage} />)
}

3.我如何构建我的应用

这是脚本的摘录，并构建了我的 package.json 文件的一部分：

 ...
 "scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject","electron-dev": "concurrently \"yarn start\" \"wait-on http://localhost:3000 && electron .\"","preelectron-build": "yarn build","postinstall": "electron-builder install-app-deps","electron-build": "electron-builder"
  },"build": {
    ...
    "files": [
      "dist/**/*"
    ],"directories": {
      "buildresources": "build","output": "dist"

    },"extraResources": [
      "./public/assets/**"
    ]
  },...
}

解决方法

对您的 extraResources 部分进行以下更改：

"extraResources": [
      {
        "from": "./public/assets","to": "assets"
      }
] 

这将复制您的生产版本的资源目录中的资产内容。在此之后，对您导入资产的方式进行以下更改：

const { app } = require('electron');
const path = require('path');

const ASSETS_PATH = app.isPackaged ?
    path.join(process.resourcesPath,'assets') :
    path.join(app.getAppPath(),`public${path.sep}assets`);

import MyImage from path.join(ASSETS_PATH,`images/my_image.png`);