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

Question

我对电子很陌生，我有一个React+electron应用程序，我想用电子构建器封装它。但问题是，在应用程序打包后，图像不会显示出来。

1.文件夹结构

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

2.如何访问dev中的图像

我在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/**"
]
},
...
}

Answer 1

对extraResources部分进行以下更改：

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

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

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`);