时间戳

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

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

问题描述

我对电子很陌生，我有一个 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/**"
    ]
  },
  ...
}

标签： reactjsimageelectronassetselectron-builder

解决方案

对您的部分进行以下更改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`);

推荐阅读