React / Electron не загружает файлы stati c, расположенные в каталоге publi c

Question

Я создал приложение React, которое отлично работает на Chrome. Теперь я хотел преобразовать его в приложение Electron. Ресурсы, расположенные в каталоге /public (изображения, значки, файлы JSON), не могут быть загружены в электронное приложение. Консоль браузера отображает ошибки при загрузке этих файлов: Failed to load resource: net::ERR_FILE_NOT_FOUND. Когда я вставляю изображение ресурса из каталога publi c непосредственно в сгенерированный файл index. html, например

<img src="pic.png" alt=" pic"/>

, он работает, но загрузка его таким же образом из компонентов React не работает. Файлы ресурсов загружаются из root (например, file: //pic.png)

Вот структура проекта:

скриншот структуры проекта

пакет. json:

  "homepage": "./",
  "main": "src/electron-starter.js",
  "build": {
    "appId": "com.myapp",
    "productName": "App",
    "files": [
      "build/**/*",
      "src/electron-starter.js"
    ],
    "directories": {
      "buildResources": "public"
    },
    "win": {
      "target": "NSIS"
    },
    "linux": {
      "target": [
        "AppImage",
        "deb"
      ],
      "category": "Audio"
    },
    "dmg": {
      "contents": [
        {
          "x": 110,
          "y": 150
        },
        {
          "x": 240,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        }
      ]
    }
  }

функция createWindow внутри электронного стартера. js:

function createWindow () {

    const mainWindow = new BrowserWindow({
        width: 1200,
        height: 700,
        webPreferences: {
            nodeIntegration: true
        }
    })

    if (process.env.ELECTRON_START_URL) {
        mainWindow.loadURL(process.env.ELECTRON_START_URL);
    } else {
        mainWindow.loadURL(url.format({
            pathname: path.join(__dirname, '../build/index.html'),
            protocol: 'file',
            slashes: true
        }))
    }

    mainWindow.webContents.openDevTools()
}

Заранее благодарю за вашу помощь!

Answer 1

Оказывается, Electron не использует каталог React / publi c. Поэтому я переместил необходимые ресурсы в / src / assets и импортировал их непосредственно внутри классов компонентов. Пример:

import logo from "../assets/logo.png";

class MyComponent extends React.Component {
    render() {
        <img src={logo} alt="my_logo"/>
    }
}

Я также добавил <base href="./"/> в заголовок индекса. html файл.

Answer 2

У меня есть этот пример, и вы оплачиваете путь с помощью «../», этот пример, если вы можете ввести путь, не нужно включать «..», я надеюсь, вы сможете разрешить

import { ipcMain, dialog } from 'electron'
import isImage from 'is-image'
import filesize from 'filesize'
import fs from 'fs'
import path from 'path'

function setMainIpc (win) {
  ipcMain.on('open-directory', (event) => {
    dialog.showOpenDialog(win, {
      title: 'Select new location',
      buttonLabel: 'open dir',
      properties: ['openDirectory']
    },
    (dir) => {
      if (dir) {
        loadImages(event, dir[0])
      }
    })
  })

  ipcMain.on('load-directory', (event, dir) => {
    loadImages(event, dir)
  })

  ipcMain.on('open-save-dialog', (event, ext) => {
    dialog.showSaveDialog(win, {
      title: 'save image modify',
      buttonLabel: 'save imagen',
      filters: [{name: 'Images', extensions: [ext.substr(1)]}]
    }, (file) => {
      if (file) {
        event.sender.send('save-image', file)
      }
    })
  })

  ipcMain.on('show-dialog', (event, info) => {
    dialog.showMessageBox(win, {
      type: info.type,
      title: info.title,
      message: info.message
    })
  })
}

function loadImages (event, dir) {
  const images = []

  fs.readdir(dir, (err, files) => {
    if (err) throw err

    for (var i = 0, length1 = files.length; i < length1; i++) {
      if (isImage(files[i])) {
        let imageFile = path.join(dir, files[i])
        let stats = fs.statSync(imageFile)
        let size = filesize(stats.size, {round: 0})
        images.push({filename: files[i], src: `plp://${imageFile}`, size: size})
      }
    }

    event.sender.send('load-images', dir, images)
  })
}

module.exports = setMainIpc