Electron-vue: Accessing local file?

[rdpascua]

I'm trying to access my local file in my vue file, apparently this only works when I build the app but no on development mode.

I've been trying to use file:/// and file://

<img :src="'/foo/2017/25/6fc4fb89-f439-4592-b94a-3323350a726b.jpeg'" alt="">

Checking in the dev console using '/foo/2017/25/6fc4fb89-f439-4592-b94a-3323350a726b.jpeg'

It shows 404 on dev, but working on built app.

http://localhost:9080/foo/2017/25/6fc4fb89-f439-4592-b94a-3323350a726b.jpeg

And accessing using file protocol

Not allowed to load local resource: file:///foo/2017/25/6fc4fb89-f439-4592-b94a-3323350a726b.jpeg

Update # 1

Setting the BrowserWindow's webSecurity to false did the trick, but I'm not convinced whether this is the correct way.

Electron BrowserWindow

  let mainWindow = new BrowserWindow({
    height: 768,
    width: 1024,
    minWidth: 1024,
    minHeight: 768,
    webPreferences: {
      webSecurity: false
    }
  })

[utkukaratas]

AFAIK the preferred folder to put your static files is dist/ folder. Electron uses that as the root folder in both development mode and production mode. Given that, webSecurity flag should be unnecessary.

[rdpascua]

These files are generated during run-time not before. like I'm storing these images in Pictures folder.

[SimulatedGREG]

@rdpascua

Disabling the webSecurity would probably be the easiest way to go about this, but it surely isn't a great recommendation. As per https://github.com/electron/electron/issues/4612, this is expected behavior from Chromium. Another workaround I can think of is using fs in your JS to load the file into memory, then convert that to base64 and use that as the <img/> source.

[rdpascua]

I do understand that, it's somehow resource intensive compare to plain image. Correct me if I'm wrong but large base64 images are slower than that right?

[SimulatedGREG]

It really depends on the file size, so doing base64 or disabling webSecurity would be your call. It would probably be worth experimenting to see what kind of results you get for your application.

[rdpascua]

Off of the box question, where do you usually perform these task? in the renderer or background? gathering a huge amount of images in your app requires too much resource right? I've never tried accessing these kind of process in background.

[SimulatedGREG]

It would probably be much better to do such a task in the main process. Using the ipc electron modules should be enough to call a function and return the image data. I'm going to close this since it isn't a direct issue with electron-vue itself. Feel free to comment any other questions.

[zxc23]

@SimulatedGREG I ran into this problem today.

I've got a file in the renderer process which plays certain sound files. E.g:

import Player from 'audio-player'
import path from 'path'
const player = new Player()

/* eslint-disable no-undef */
export const 800hz = () => {
  player.play(path.join(__static, '/sounds/800hz.wav'))
}

I had to disable web security for it to work. Before the more recent restructuring in the electron-vue template, I had my sound assets in dist/sounds, which worked fine. Should I go back to doing that? It didn't seem right to place assets in a folder which mostly gets wiped with new builds.

[SimulatedGREG]

@zxc23

The use of the __static is meant specifically for node modules that need a real file path, like fs. Items like <img src> or audio libraries were meant for the browser and can still use the typical browser protocol. So if your sound file is at static/sounds/800hz.wav, then you should be able to just use player.play('static/sounds/800hz.wav').

[zxc23]

@SimulatedGREG Thank you, that did the trick just nicely.

[rdpascua]

on my end static is not applicable since I had to upload images. I haven't tackled the issue yet, I need to disable security just to make it work

Sent from my iPhone

On 19 Jun 2017, at 4:30 AM, zxc23 <[email protected][e-mail]> wrote:

@SimulatedGREGhttps://github.com/simulatedgreg Thank you, that did the trick just nicely.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHubhttps://github.com/SimulatedGREG/electron-vue/issues/165#issuecomment-309300988, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ACYext-cWxFagUuZHZqZPnrUbcOa_4Zrks5sFYjxgaJpZM4MpJGt.

[johnking]

It failed on my side by using
webPreferences: {
webSecurity: false
}

I am implementing a pdf viewer to read local pdf files.

[SwissArmyMike]

I'm also having issues where accessing local files (images) saved in the userData folder is not allowed even though I have webPreferences:{ webSecurity: false}.. Anyone know why?

[bbruceyuan]

I'm also having issues where accessing local files (images) saved in the userData folder is not allowed even though I have webPreferences:{ webSecurity: false}.. Anyone know why?

My problem is exactly same with you. Did you find a solution how to solve the problem? can you share with me, thank you! (same with you, I have set webPreferences:{ webSecurity: false} )