Electron: Échec du chargement de la ressource : net :: ERR_FILE_NOT_FOUND file:///D:/css/app.css

Créé le 25 mai 2015 · 26Commentaires · Source: electron/electron

J'ai une telle structure dans l'application:
file struct

J'écris en tête mon index.html :

<link rel="stylesheet" href="css/app.css"/>

exécuter l'électron et obtenir l'erreur :

capture
Échec du chargement de la ressource : net :: ERR_FILE_NOT_FOUND file:///D:/css/app.css
S'il vous plaît tout le monde, dites-moi, comment dois-je définir le chemin d'accès au fichier ?

Source

RinatMullayanov

Commentaire le plus utile

Si cela se produit lorsque vous avez <base href="/"> dans index.html, remplacez-le simplement par <base href="./"> .

Myrga le 31 oct. 2016

👍141 ❤56 🎉29 😄22 👎12 👀5 🚀5 😕2

Tous les 26 commentaires

Problème connexe : #1747.

lolmaus le 25 mai 2015

👎44 😕4 👀2 😄2 🚀1 ❤1 🎉1 👍1

Essayez ceci comme moyen alternatif de contourner ce problème de chemin :

<html>
  <head>
    <title></title>
  </head>
  <body>
    <script>
    var link = document.createElement('link')
    link.setAttribute('rel', 'stylesheet')
    link.setAttribute('href', require('path').join(__dirname, 'css', 'app.css'))
    document.head.appendChild(link)
    </script>
  </body>
</html>

shama le 25 mai 2015

👍4 🚀1 ❤1

@shama Merci pour l'extrait.
J'obtiens une erreur car l'utilisation de <base href="/">, sans cette erreur ne se produit pas.
Exemple de travail https://github.com/RinatMullayanov/angular-boilerplate branch electron .

RinatMullayanov le 25 mai 2015

👍25 ❤2

Avoir le même problème aussi. Electron essaie de charger des ressources à partir de C:/ , les chemins relatifs ne fonctionnent pas.
La définition du chemin complet n'est pas une option, les fichiers ne seront pas chargés si nous plaçons l'application sur un autre chemin.

odragora le 20 févr. 2016

J'ai le même problème pour obtenir une police

J'ai ajouté ceci à mon CSS
<strong i="7">@import</strong> url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
J'ai même essayé d'ajouter ceci à mon html :
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

J'ai aussi essayé :

<link rel="stylesheet" type="text/css" href="http//fonts.googleapis.com/css?family=Open+Sans" />

<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Open+Sans" />

mais j'obtiens cette erreur :
Failed to load resource: net::ERR_CONNECTION_REFUSED

BesatZardosht le 13 avr. 2016

❤2

Si cela se produit lorsque vous avez <base href="/"> dans index.html, remplacez-le simplement par <base href="./"> .

Myrga le 31 oct. 2016

👍141 ❤56 🎉29 😄22 👎12 👀5 🚀5 😕2

@Myrga, tu

guibot17 le 14 nov. 2016

ps : si vous êtes venu ici et que vous utilisez create-react-app, essayez de mettre "homepage": "./", dans votre package.json. (Bien qu'apparemment, cela ne soit pas actuellement pris en charge, vous pourriez donc avoir d'autres problèmes avec les polices et autres, ce qui pourrait nécessiter le déplacement de ces actifs dans votre dossier /public)

johnmw le 12 janv. 2017

👍24 ❤16 🚀9 🎉7 😄7

Merci beaucoup

breaded le 17 févr. 2017

@BesatZardosht Vous avez une faute de frappe dans votre URL :

<link rel="stylesheet" type="text/css" href="https//fonts.googleapis.com/css?family=Open+Sans" />

devrait être:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans" />

(notez le : )

anaisbetts le 17 févr. 2017

Si vous rencontrez ici le même problème en utilisant Webpack 2.x , React et/ou Redux , il est possible que cela résolve votre problème :

Recherchez « publicPath » dans le répertoire de votre projet et modifiez sa valeur de / à ./
avec tous les différents modèles disponibles, ce paramètre peut être trouvé à différents endroits, dans mon cas en utilisant redux-cli qui utilise redux-starter-kit , c'était dans le project.config.js :

publicPath: './',

De plus, si vous construisez pour Electron vous devrez peut-être ajouter/modifier la propriété Webpack target .
Rester heureux!! ??

mim-Armand le 17 juin 2017

🎉3

Avait le même problème, la solution de Myrga a fonctionné. je pense doit considérer / comme répertoire racine global pour le PC lors de l'utilisation du protocole de fichier. Tandis que "./" fonctionne comme une référence relative au dossier actuel. Juste une supposition, lorsque vous utilisez le protocole http:// sur le port 4200 (où je sers mon application Angular4), tout fonctionne avec "/". Pour le protocole de fichier, vous devez utiliser "./"

hexthedev le 27 juil. 2017

👍2

J'ai décidé de refaire ma candidature en React. Une fois que j'ai ajouté le chargeur de fichiers à mon projet, j'ai recommencé à avoir ce problème. changer la propriété publicPath dans webpack.config.js en un chemin relatif (pour moi ./app/ plutôt que /app/) a résolu le problème.

PS semble que le serveur de développement déteste cela. Si vous effectuez cette modification et que vous souhaitez exécuter un serveur de développement Webpack, cette modification le confondra. Vous devrez passer d'un travail à l'autre au fur et à mesure que vous travaillez directement dans l'électron et sur le serveur de développement (la raison pour laquelle je fais cela est de faire du travail css, je trouve le serveur de développement plus rapide et plus stable)

hexthedev le 4 août 2017

Vous pouvez enregistrer le fichier html en tant que "enregistrer en tant que page Web", puis essayer de l'ouvrir dans Chrome.
Cela a fonctionné pour moi.

emirpoy le 22 août 2017

👎14 👀3 😕1

comment résoudre " Échec du chargement de la ressource: net :: ERR_FILE_NOT_FOUND "
chaque fois que j'ajoute une image en utilisant "CSS", cette erreur s'affiche. Avez-vous une solution ???
non seulement l'image mais les fichiers comme le fichier de police, cela donne la même erreur.

Tahawahid le 20 juin 2018

@Tahawahid @RinatMullayanov
C'est parce que tous vos fichiers sont servis à partir du système de fichiers local plutôt que du chemin relatif de l'application.
La solution est d'intercepter le protocole de fichier. Effectuez les modifications suivantes dans le fichier main.js

Main.js

mainWindow = new BrowserWindow({width: 1100, height: 700, icon: __dirname + '/icon.ico'}) mainWindow.loadURL(url.format({ pathname:'index.html', protocol: 'file', slashes: true }))

app.on('ready', () => { protocol.interceptFileProtocol('file', (request, callback) => { const url = request.url.substr(7) /* all urls start with 'file://' */ callback({ path: path.normalize( ${__dirname}/${url} )}) }, (err) => { if (err) console.error('Failed to register protocol') }) createWindow() /* callback function */ })

itsaakashpatel le 9 juil. 2018

👍4

une

rkmyowin le 8 sept. 2018

👎6 👍2

@Tahawahid @RinatMullayanov
C'est parce que tous vos fichiers sont servis à partir du système de fichiers local plutôt que du chemin relatif de l'application.
La solution est d'intercepter le protocole de fichier. Effectuez les modifications suivantes dans le fichier main.js
Main.js
mainWindow = new BrowserWindow({width: 1100, height: 700, icon: __dirname + '/icon.ico'}) mainWindow.loadURL(url.format({ pathname:'index.html', protocol: 'file', slashes: true }))
app.on('ready', () => { protocol.interceptFileProtocol('file', (request, callback) => { const url = request.url.substr(7) /* all urls start with 'file://' */ callback({ path: path.normalize( ${__dirname}/${url} )}) }, (err) => { if (err) console.error('Failed to register protocol') }) createWindow() /* callback function */ })

xiaomizhou66 le 22 avr. 2019

Problème de chemin. Le navigateur recherche votre fichier dans D:/css/app.css. Ceci parce que quelque part dans votre code, vous avez mentionné un mauvais chemin. Si on vous donne un chemin comme /css/... cela recherchera dans D:/

Yuresh le 27 avr. 2019

Cela a également fait l'affaire. Merci à M. @itsaakashpatel pour la perspicacité.

// ...
const { protocol } = require('electron')
// ... 
// run the next block right before <BrowserWindow>.loadFile()
const htmlRootDir = 'dist/'
const indexFile = 'index.html'

protocol.interceptFileProtocol(
    'file',
    (request, callback) => {
        const url = request.url.substr(7) // strip "file://" out of all urls
        if (request.url.endsWith(indexFile)) {
            callback({ path: url })
        } else {
            callback({ path: path.normalize(`${__dirname}/${htmlRootDir}/${url}`) })
        }
    }, 
    error => console.error(error) 
) 
// ...

Remplacez simplement htmlRootDir et/ou indexFile pour vos attentes.
_Testé sur Linux_

leodutra le 15 juil. 2019

👍1

@Myrga Merci d'avoir sauvé ma journée. J'ai adoré ta réponse :)

zearaez le 16 juil. 2019

@Myrga eh bien, vous "homepage": "./" dans le package.json au lieu de coder en dur ces choses.

defusioner le 2 sept. 2019

👍4

@Myrga eh bien, vous "homepage": "./" dans le package.json au lieu de coder en dur ces choses.

S'il vous plaît @defusioner , existe-t-il un document à ce sujet?

leodutra le 2 sept. 2019

@leodutra humm, j'utilise https://create-react-app.dev/docs/deployment#building -for-relative-paths

defusioner le 3 sept. 2019

@defusioner Hum, ça explique beaucoup de choses.
On dirait que ce n'est pas au niveau électronique , c'est plus une page d'accueil pour les applications de réaction , où cela remplacera la racine par défaut pour tout lien parent ou racine.

Dans mon cas, en utilisant une dist Vue.js ou un électron brut, cela ne fonctionnera probablement pas.

Je pense que cette approche de paquet devrait être prise en considération... comme certains electronBasePath sur package.json

leodutra le 3 sept. 2019

Je pense que le win.loadFile('index.html') est comme une merde ! Après l'avoir compilé dans un fichier EXE en utilisant electron-builder . Il affichera toujours DevTools failed to load SourceMap: Could not load content for file:///C:/User..../resources/app.asar/bootstrap.min.css.map .

Mais le win.loadURL() fonctionne bien.

J'ai passé 8 heures pour découvrir que c'est un bug que je ne peux pas résoudre.

Ensuite, j'ai réalisé que ce bug n'était pas important, car le fichier map est bien importé.

Pour moi, le vrai bug a été causé par alert() : https://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert