Electron: Gagal memuat sumber daya: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css

Dibuat pada 25 Mei 2015 · 26Komentar · Sumber: electron/electron

Saya memiliki struktur seperti itu dalam aplikasi:
file struct

Saya menulis di kepala index.html saya:

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

jalankan elektron dan dapatkan kesalahan:

capture
Gagal memuat sumber daya: net::ERR_FILE_NOT_FOUND file:///D:/css/app.css
Tolong semuanya, beri tahu saya, bagaimana saya harus mengatur jalur ke file?

Sumber

RinatMullayanov

Komentar yang paling membantu

Jika ini terjadi saat memiliki <base href="/"> di index.html, ganti saja dengan <base href="./"> .

Myrga pada 31 Okt 2016

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

Semua 26 komentar

Masalah terkait: #1747.

lolmaus pada 25 Mei 2015

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

Coba ini sebagai cara alternatif untuk mengatasi masalah jalur ini:

<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 pada 25 Mei 2015

👍4 🚀1 ❤1

@shama Terima kasih atas cuplikannya.
Saya mendapatkan kesalahan karena penggunaan <base href="/">, tanpa kesalahan ini tidak terjadi.
Contoh pekerjaan https://github.com/RinatMullayanov/angular-boilerplate branch electron .

RinatMullayanov pada 25 Mei 2015

👍25 ❤2

Punya masalah yang sama juga. Elektron mencoba memuat sumber daya dari C:/ , jalur relatif tidak berfungsi.
Menyetel full path bukanlah pilihan, file tidak akan dimuat jika kita akan menempatkan aplikasi di path lain.

odragora pada 20 Feb 2016

Saya memiliki masalah yang sama mendapatkan beberapa font

Saya telah menambahkan ini ke CSS saya
<strong i="7">@import</strong> url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
Saya bahkan telah mencoba menambahkan ini ke html saya:
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Open+Sans" />

Saya juga sudah mencoba:

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

tapi saya mendapatkan kesalahan ini:
Failed to load resource: net::ERR_CONNECTION_REFUSED

BesatZardosht pada 13 Apr 2016

❤2

Jika ini terjadi saat memiliki <base href="/"> di index.html, ganti saja dengan <base href="./"> .

Myrga pada 31 Okt 2016

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

@Myrga Anda adalah penyelamat hidup. Saya sudah mencari jawaban selama 5 hari sekarang, tidak ada dokumen tentang ini, sampai saya menemukan posting lama ini. Terima kasih banyak

guibot17 pada 14 Nov 2016

ps: jika Anda datang ke sini dan menggunakan create-react-app, coba masukkan "homepage": "./", di package.json Anda. (Meskipun tampaknya ini saat ini tidak didukung sehingga Anda mungkin memiliki masalah lain dengan font dan semacamnya, yang mungkin memerlukan pemindahan aset tersebut ke folder/publik Anda)

johnmw pada 12 Jan 2017

👍24 ❤16 🚀9 🎉7 😄7

Terima kasih banyak

breaded pada 17 Feb 2017

@BesatZardosht Anda salah ketik di URL Anda:

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

seharusnya:

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

(perhatikan : )

anaisbetts pada 17 Feb 2017

Jika Anda di sini dengan masalah yang sama menggunakan Webpack 2.x , React dan/atau Redux , ada kemungkinan ini akan menyelesaikan masalah Anda:

Cari direktori proyek Anda untuk "publicPath" dan ubah nilainya dari / menjadi ./
dengan semua boilerplate berbeda yang tersedia, pengaturan ini dapat ditemukan di lokasi yang berbeda, Dalam kasus saya menggunakan redux-cli yang menggunakan redux-starter-kit , itu ada di project.config.js :

publicPath: './',

Juga jika Anda membangun untuk Electron Anda mungkin perlu menambahkan/memodifikasi properti Webpack target .
Tetap bahagia!! 😄

mim-Armand pada 17 Jun 2017

🎉3

Punya masalah yang sama, solusi Myrga berhasil. Menurut saya harus mempertimbangkan / sebagai direktori root global untuk PC saat menggunakan protokol file. Sementara "./" berfungsi sebagai referensi relatif ke folder saat ini. Coba tebak, saat menggunakan protokol http:// pada port 4200 (Tempat saya melayani aplikasi Angular4 saya) semuanya berfungsi dengan "/". Untuk protokol file harus menggunakan "./"

hexthedev pada 27 Jul 2017

👍2

Memutuskan untuk membuat ulang aplikasi saya di React. Setelah saya menambahkan file-loader ke proyek saya, saya mulai mendapatkan masalah ini lagi. mengubah properti publicPath di webpack.config.js ke jalur relatif (untuk saya ./app/ daripada /app/) memperbaiki masalah.

PS tampaknya server dev membenci ini. Jika Anda membuat perubahan ini dan ingin menjalankan server pengembang webpack, perubahan ini akan membingungkannya. Anda harus beralih bolak-balik saat Anda beralih dari bekerja secara langsung di elektron dan bekerja di server dev (Alasan saya melakukan ini adalah untuk melakukan pekerjaan css, saya menemukan server dev lebih cepat dan lebih stabil)

hexthedev pada 4 Agu 2017

Anda dapat menyimpan file html sebagai "save as web page" lalu coba buka di chrome.
Ini berhasil untuk saya.

emirpoy pada 22 Agu 2017

👎14 👀3 😕1

bagaimana mengatasi " Gagal memuat sumber daya: net::ERR_FILE_NOT_FOUND "
setiap kali saya menambahkan gambar menggunakan "CSS" itu melempar kesalahan ini
tidak hanya gambar tetapi file seperti file font, itu memberikan kesalahan yang sama.

Tahawahid pada 20 Jun 2018

@Tahawahid @RinatMullayanov
Itu karena semua file Anda dilayani dari sistem file lokal daripada jalur aplikasi relatif.
Solusinya adalah dengan mencegat protokol file. Lakukan perubahan berikut pada file 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 pada 9 Jul 2018

👍4

rkmyowin pada 8 Sep 2018

👎6 👍2

@Tahawahid @RinatMullayanov
Itu karena semua file Anda dilayani dari sistem file lokal daripada jalur aplikasi relatif.
Solusinya adalah dengan mencegat protokol file. Lakukan perubahan berikut pada file 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 */ })

kan

xiaomizhou66 pada 22 Apr 2019

Masalah jalur. Browser mencari file Anda di D:/css/app.css. Ini karena di suatu tempat dalam kode Anda, telah menyebutkan jalur yang salah. Jika Anda diberi jalur seperti /css/... ini akan mencari di D:/

Yuresh pada 27 Apr 2019

Ini juga berhasil. Terima kasih Pak @itsaakashpatel atas wawasannya.

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

Ganti saja htmlRootDir dan/atau indexFile sesuai harapan Anda.
_Diuji di Linux_

leodutra pada 15 Jul 2019

👍1

@Myrga Terima kasih telah menyelamatkan hari saya. Suka jawabanmu :)

zearaez pada 16 Jul 2019

@Myrga baik, Anda mungkin akan menetapkan "homepage": "./" di package.json alih-alih mengkodekan hal-hal ini dengan keras.

defusioner pada 2 Sep 2019

👍4

@Myrga baik, Anda mungkin akan menetapkan "homepage": "./" di package.json alih-alih mengkodekan hal-hal ini dengan keras.

Tolong @defusioner , apakah ada dokumen tentang ini?

leodutra pada 2 Sep 2019

@leodutra humm, saya menggunakan react-cra dan mereka dapat menghasilkan konfigurasi seperti itu: https://create-react-app.dev/docs/deployment#building -for-relative-paths

defusioner pada 3 Sep 2019

@defusioner Hum, itu menjelaskan banyak hal.
Sepertinya ini bukan pada level elektron , ini lebih merupakan beranda untuk aplikasi reaksi , di mana ini akan menggantikan root default untuk tautan relatif atau root apa pun.

Dalam kasus saya, menggunakan dist Vue.js atau elektron mentah, ini mungkin tidak akan berhasil.

Saya pikir pendekatan paket ini harus dipertimbangkan ... seperti beberapa electronBasePath pada package.json

leodutra pada 3 Sep 2019

Saya pikir win.loadFile('index.html') itu seperti sampah! Setelah kita compile ke file EXE dengan menggunakan electron-builder . Itu akan selalu menunjukkan DevTools failed to load SourceMap: Could not load content for file:///C:/User..../resources/app.asar/bootstrap.min.css.map .

Tapi win.loadURL() bekerja dengan baik.

Saya menghabiskan 8 jam untuk mengetahui bahwa ini adalah bug yang tidak dapat saya selesaikan.

Kemudian saya menyadari bug ini tidak penting, karena file peta memang diimpor.

Bagi saya, bug sebenarnya disebabkan oleh alert() : https://stackoverflow.com/questions/56805920/cant-edit-input-text-field-after-window-alert