Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css #1769

RinatMullayanov · 2015-05-25T06:35:23Z

I have such a structure in the application:

I write in head my index.html:

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

run electron and get error:

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css
Please everyone, tell me, how should I set the path to the file?

The text was updated successfully, but these errors were encountered:

lolmaus · 2015-05-25T14:03:14Z

Related issue: #1747.

shama · 2015-05-25T17:40:36Z

Try this as an alternative way to get around this path issue:

<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>

RinatMullayanov · 2015-05-25T17:45:23Z

@shama Thanks for snippet.
I get an error because the use <base href="/">, without this error does not occur.
Sample work https://github.com/RinatMullayanov/angular-boilerplate branch electron.

odragora · 2016-02-20T12:52:21Z

Have the same issue too. Electron tries to load resources from C:/ , relative paths not working.
Setting full path is not an option, files will not be loading if we will place application on another path.

BesatZardosht · 2016-04-13T12:45:54Z

I have the same issue getting some font

I have added this to my CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
I have even tried adding this to my html:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

I have also tried:

<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" />

but I get this error:
Failed to load resource: net::ERR_CONNECTION_REFUSED

Myrga · 2016-10-31T21:24:36Z

If this occur when having <base href="/"> in the index.html, just replace it by <base href="./">.

guibot17 · 2016-11-14T06:53:36Z

@Myrga you're a life save. I've been looking for an answer for 5 days now, no doc on this, until I came across this old post. Thanks a lot

johnmw · 2017-01-12T03:54:18Z

ps: if you came here and are using create-react-app, try putting "homepage": "./", in your package.json. (Although apparently this is not currently supported so you might have other issues with fonts and such, which might require moving those assets to your /public folder)

breaded · 2017-02-17T16:27:06Z

thank you so much

anaisbetts · 2017-02-17T17:40:59Z

@BesatZardosht You've got a typo in your URL:

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

should be:

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

(note the :)

mim-Armand · 2017-06-17T17:27:47Z

In case you are here with the same problem using Webpack 2.x, React and/or Redux, there is a chance that this would solve your problem:

Search your project directory for "publicPath" and change its value from / to ./
with all the different available boilerplates this setting may be found in different locations, In my case using redux-cli which uses redux-starter-kit, it was in the project.config.js:

publicPath: './',

Also if you are building for Electron you may need to add/modify the Webpack target property.
Stay Happy!! 😄

hexthedev · 2017-07-27T17:51:26Z

Had same problem, Myrga's solution worked. I think must consider / as global root directory for the PC when using file protocol. While "./" works as a relative reference to the current folder. Just a guess, when using http:// protocol on port 4200 (Where I serve my Angular4 app) everything works with "/". For file protocol have to use "./"

hexthedev · 2017-08-04T14:28:21Z

Decided to remake my application in React. Once I added file-loader to my project, I started getting this issue again. changing the publicPath property in webpack.config.js to a relative path (for me ./app/ rather than /app/) fixed the problem.

P.S. seems that the dev server hates this. If you make this change and want to run a webpack dev server this change will confuse it. You'll need to switch back and forth as you go from working directly in electron and working on dev server (The reason i do this is to do css work, I find the dev server faster and more stable)

emirpoy · 2017-08-22T02:19:04Z

You can save the html file as "save as web page" then try to open in chrome.
This worked for me.

Tahawahid · 2018-06-20T15:22:15Z

how to solve "Failed to load resource: net::ERR_FILE_NOT_FOUND"
whenever I add an image using "CSS" it throws this error. Do you guys have any solution for it???
not only image but the files like font file, it gives the same error.

itsaakashpatel · 2018-07-09T06:12:04Z

@Tahawahid @RinatMullayanov
It's because of your all files are being served from the local file system rather than the relative app path.
The solution is to intercept the file protocol. Do following changes in main.js file

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 */ })

rkmyowin · 2018-09-08T19:02:49Z

a

xiaomizhou66 · 2019-04-22T09:30:19Z

@Tahawahid @RinatMullayanov
It's because of your all files are being served from the local file system rather than the relative app path.
The solution is to intercept the file protocol. Do following changes in main.js file

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 */ })

？

Yuresh · 2019-04-27T18:11:16Z

Path issue. Browser search your file in D:/css/app.css. This because somewhere in your code, have mentioned a wrong path. If you are given a path like /css/... this will search in D:/

leodutra · 2019-07-15T20:17:15Z

This also did the trick. Thanks for Mr. @itsaakashpatel for the insight.

// ...
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) 
) 
// ...

Just replace htmlRootDir and/or indexFile for your expectations.
Tested on Linux

zearaez · 2019-07-16T05:38:39Z

@Myrga Thanks for saving my day. Loved your answer :)

defusioner · 2019-09-02T08:53:07Z

@Myrga well, you would probably set "homepage": "./" in the package.json instead of hard-coding these things.

leodutra · 2019-09-02T19:35:12Z

@Myrga well, you would probably set "homepage": "./" in the package.json instead of hard-coding these things.

Please @defusioner, is there any doc on this?

defusioner · 2019-09-03T07:09:35Z

@leodutra humm, I'm using react-cra and they are able to produce such config: https://create-react-app.dev/docs/deployment#building-for-relative-paths

leodutra · 2019-09-03T09:01:59Z

@defusioner Hum, that explains a lot.
Looks like this is not on the electron level, it's more a homepage for react apps, where this will replace the default root for any relative or root link.

In my case, using a Vue.js dist or raw electron, this probably won't work.

I think this package approach should be taken in consideration... like some electronBasePath on package.json

yingshaoxo · 2020-06-07T19:47:36Z

I think the win.loadFile('index.html') is like a shit! After we compile it to EXE file by using electron-builder. It'll always show DevTools failed to load SourceMap: Could not load content for file:///C:/User..../resources/app.asar/bootstrap.min.css.map.

But the win.loadURL() works well.

I spent 8 hours to find out that this is a bug that I can't solve.

Then I realized this bug is not important, because the map file is indeed imported.

For me, the real bug was caused by alert(): https://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert

maoAmanda · 2021-04-07T07:41:18Z

In case you are here with the same problem using Webpack 2.x, React and/or Redux, there is a chance that this would solve your problem:

Search your project directory for "publicPath" and change its value from / to ./
with all the different available boilerplates this setting may be found in different locations, In my case using redux-cli which uses redux-starter-kit, it was in the project.config.js:
publicPath: './',
Also if you are building for Electron you may need to add/modify the Webpack target property.
Stay Happy!! 😄

it works for me

… build folder Solved by fixing the loading path in electron.js, and by changing the homefolder in package.json according to this issue: electron/electron#1769

r-shafi · 2021-09-14T13:40:09Z

Having this same error. Can't load image and other contents from assets folder in Angular 12. When I look in the console I see that it is skipping the project-name-directory and directly looking into the assets folder from the root of my system

r-shafi · 2021-09-14T13:48:50Z

Sorry I'm dumb.

In the Angular project, you don't have to add the relative path from your file to image file.
Angular resolves this problem for you, and in a component, you have to only add a path to the assets folder, instead of ../../assets.

eezz4 · 2024-01-25T15:08:41Z

If you're using CRA, instead of "homepage": "./", you can do one of the following.

.env

PUBLIC_URL="./"

react-app-rewired

  webpack: (reactConfig, env) => {
    const isDev = env === "development";
    if (!isDev) reactConfig.output.publicPath = "./";
    return reactConfig;
  },

Ilya-Meer · 2024-02-05T06:16:20Z

This also did the trick. Thanks for Mr. @itsaakashpatel for the insight.

// ...
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) 
) 
// ...

Just replace htmlRootDir and/or indexFile for your expectations. Tested on Linux

This did the trick for me while working with a Vue.js application, thanks!

RinatMullayanov closed this as completed May 25, 2015

thomascayne mentioned this issue Mar 16, 2017

Issue getting Dev environment up JonnyBGod/angular2-webpack-advance-starter#8

Open

zsoflin mentioned this issue Nov 16, 2018

Multiple errors on capacitor electron app ionic-team/capacitor#888

Closed

KurosakiRei mentioned this issue Apr 11, 2023

路由组件（Home或者About）使用img标签引用资源Failed to load resource: net::ERR_FILE_NOT_FOUND Yukun-Guo/vite-vue3-electron-ts-template#5

Closed

GilHogan mentioned this issue Nov 1, 2023

你好，你的项目对我很有用，但是这里有个报错，可以看下吗 GilHogan/JDTreasureGrabber#4

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css #1769

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css #1769

RinatMullayanov commented May 25, 2015

lolmaus commented May 25, 2015

shama commented May 25, 2015

RinatMullayanov commented May 25, 2015

odragora commented Feb 20, 2016

BesatZardosht commented Apr 13, 2016

Myrga commented Oct 31, 2016

guibot17 commented Nov 14, 2016

johnmw commented Jan 12, 2017 •

edited

breaded commented Feb 17, 2017

anaisbetts commented Feb 17, 2017

mim-Armand commented Jun 17, 2017

hexthedev commented Jul 27, 2017

hexthedev commented Aug 4, 2017 •

edited

emirpoy commented Aug 22, 2017

Tahawahid commented Jun 20, 2018 •

edited

itsaakashpatel commented Jul 9, 2018 •

edited

rkmyowin commented Sep 8, 2018

xiaomizhou66 commented Apr 22, 2019

Main.js

Yuresh commented Apr 27, 2019 •

edited

leodutra commented Jul 15, 2019

zearaez commented Jul 16, 2019

defusioner commented Sep 2, 2019 •

edited

leodutra commented Sep 2, 2019

defusioner commented Sep 3, 2019

leodutra commented Sep 3, 2019 •

edited

yingshaoxo commented Jun 7, 2020 •

edited

maoAmanda commented Apr 7, 2021

r-shafi commented Sep 14, 2021

r-shafi commented Sep 14, 2021

eezz4 commented Jan 25, 2024 •

edited

Ilya-Meer commented Feb 5, 2024

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css #1769

Failed to load resource: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css #1769

Comments

RinatMullayanov commented May 25, 2015

lolmaus commented May 25, 2015

shama commented May 25, 2015

RinatMullayanov commented May 25, 2015

odragora commented Feb 20, 2016

BesatZardosht commented Apr 13, 2016

Myrga commented Oct 31, 2016

guibot17 commented Nov 14, 2016

johnmw commented Jan 12, 2017 • edited

breaded commented Feb 17, 2017

anaisbetts commented Feb 17, 2017

mim-Armand commented Jun 17, 2017

hexthedev commented Jul 27, 2017

hexthedev commented Aug 4, 2017 • edited

emirpoy commented Aug 22, 2017

Tahawahid commented Jun 20, 2018 • edited

itsaakashpatel commented Jul 9, 2018 • edited

Main.js

rkmyowin commented Sep 8, 2018

xiaomizhou66 commented Apr 22, 2019

Main.js

Yuresh commented Apr 27, 2019 • edited

leodutra commented Jul 15, 2019

zearaez commented Jul 16, 2019

defusioner commented Sep 2, 2019 • edited

leodutra commented Sep 2, 2019

defusioner commented Sep 3, 2019

leodutra commented Sep 3, 2019 • edited

yingshaoxo commented Jun 7, 2020 • edited

maoAmanda commented Apr 7, 2021

r-shafi commented Sep 14, 2021

r-shafi commented Sep 14, 2021

eezz4 commented Jan 25, 2024 • edited

.env

react-app-rewired

Ilya-Meer commented Feb 5, 2024

johnmw commented Jan 12, 2017 •

edited

hexthedev commented Aug 4, 2017 •

edited

Tahawahid commented Jun 20, 2018 •

edited

itsaakashpatel commented Jul 9, 2018 •

edited

Yuresh commented Apr 27, 2019 •

edited

defusioner commented Sep 2, 2019 •

edited

leodutra commented Sep 3, 2019 •

edited

yingshaoxo commented Jun 7, 2020 •

edited

eezz4 commented Jan 25, 2024 •

edited