PNG файлы не найдены в ASAR

У меня есть приложение Electron (1.7.10), которое сообщает, что не может найти 5 из 7 файлов PNG в моем ASAR. Все 7 PNG находятся в одной папке, и 2 из них отображаются на экране в порядке. Остальные 5 отчетов net:: ERR_FILE_NOT_FOUND.

Все атрибуты src для тегов img генерируются динамически и используют относительные пути (assets/images/MyImage.png). Если я извлечу ASAR, я смогу увидеть файлы там, в правильной папке (как указано в атрибуте src).

Если я использую консоль, чтобы установить местоположение моего браузера для одного из изображений (document.location.href = "file:///path/to/app.asar/dist/assets/images/MyImage.png") Я получаю те же результаты - 2 из 7 показывают ОК.

Перед упаковкой моей заявки (с электронным билдером) все изображения отображаются правильно.

Есть идеи?

Спасибо,

TTE

Источник

3 ответа

Дайте угадаю, вы создаете SPA с реагированием с помощью response-router и BrowserRouter?

В таком случае используйте вместо него HashRouter. Electron не работает с маршрутом SPA по умолчанию, потому что маршрут SPA изменяется, но путь к ресурсу всегда относительно index.html.

Источник

Я не оценивал другие ответы, но в моем конкретном случае решение сработало. Я не верю, что это хорошо задокументировано, поэтому люди могут часто сталкиваться с этой проблемой. Что касается меня, здесь были определены соответствующая проблема и решение .

Для адреса добавьте <base href='./' />в index.html (или любой другой исходный файл html, в котором размещается SPA). Это мой полный пример:

index.html

      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <base href="./" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
            name="description"
            content="Web site created using create-react-app"
        />
        <meta
            http-equiv="Content-Security-Policy"
            content="script-src 'Self' 'unsafe-inline';"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

        <title>React App</title>
    </head>
    <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
    </body>
</html>
Источник 
const path = require('path');

path.join(__dirname, 'assets/images/MyImage.png');
Источник
Другие вопросы по тегам