Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

webpack-dev-server stops access to local files #22

Open
kylewetton opened this issue Jun 6, 2020 · 2 comments
Open

webpack-dev-server stops access to local files #22

kylewetton opened this issue Jun 6, 2020 · 2 comments

Comments

@kylewetton
Copy link

Hey mate, thanks so much for the boilerplate, it's fantastic.

I had started a prototype of an Electron app before using your boilerplate, on the prototype I had a simple onDrop function that gave me a path in the event:
e.dataTransfer.files

This has a paths like so:

/Users/kylewetton/Desktop/some_image.jpg

Works well!

However, in your boilerplate because of the web-server, my function results in a path like this

http://localhost:8080/Users/kylewetton/Desktop/some_image.jpg

Am i able to reference local files while the server is running? I'm definitely in my 'stumble around until I find a solution' stage of Electron and Node in general so hopefully this is something that is easy to circumvent.

@tukavic
Copy link

tukavic commented Jul 17, 2020

Hi Kyle,

I'm actually having the same issue trying to reference image references. Were you able to find a solution to the http://localhost:8080 issue?

@prashantviga
Copy link

I'm actually having the same issue trying to reference image references. Were you able to find a solution to the http://localhost:8080 issue?

Hi Kyle,
I was able to work around this issue. Instead of referencing the image directly using it's local source ( <img src='../all_images/some_img.jpg'></img>). Do something like this to import images (assuming you are working with multiple images).

function importAll(r) {
  let images = {};
  r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
  console.log('all images', images)
  return images;
}
let images = importAll(require.context('../all_images/', false, /\.(gif|jpe?g|svg)$/));
export default images

and import this component and use the individual image.

You can use something like - src={images['some_img.jpg'] == undefined ? null : images['some_img.jpg'].default}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants