In dev mode: Not allowed to load local resource

[Stanimir]

Prerequisites

• Using npm
• Using an up-to-date main branch
• Using latest version of devtools. Check the docs for how to update
• Tried solutions mentioned in #400
• For issue in production release, add devtools output of DEBUG_PROD=true npm run build && npm start

Expected Behavior

Images with file:// protocol to load in development mode with webpack devServer

Current Behavior

Images with file:// protocol not load in development mode. Error Not allowed to load local resource

Steps to Reproduce

1. add html with local image like <a href="file://C: ..."/>

2. npm start

3. in dev tools its have error Not allowed to load local resource. This error not exist in production and packaged electron app

Possible Solution (Not obligatory)

the problem is here: https://github.com/electron-react-boilerplate/electron-react-boilerplate/blob/main/src/main/util.ts#L6
in development mode host is: http://localhost if electron webSecurity is enabled it's not possible to load file://
To load local resources in dev mode it's need to change win.loadURL('file://..') instead

Context

Your Environment

• Node version : 16
• electron-react-boilerplate version or branch : main
• Operating System and version : windows and mac
• Link to your project :
  I have electron file manager app: https://github.com/tagspaces/tagspaces
  

[SWAPNIL AKOLKAR]

finally loaded images from assets folder from the guide https://electron-react-boilerplate.js.org/docs/adding-assets#run-time-assets and some help of chatgpt.

1. first you have to change the build array from package.json to add the "public" or your desier folder name.
   "build": { // ... "files": [ //keep rest of settings as it is "public" // ... ], }
2. then you have to put that folder in root directory of project.
   I created public folder at root of boilerplate project.
3. Next you can use thge image path for srfc attribute in your react project as follows

<img alt='Logo' className='h-25px logo' src={window.location.origin + '/media/logos/default-dark.svg'} />
here i have media/logos as subfolder inside the public folder. and inside logo folder i have default-dark.svg
The main thing is that I replaced path.join(..... ) function in src with window.location.origin

[Stanimir]

@SwapnilAkolkar you writting in wrong issue.. This issue is not for assets and is for dev mode only! I don't have problems in production to load local images from the filesystem path like /home/user/img.jpg