Local image won't load

I can’t load an image file.

The docs say I should hack my browser or run a web server, but neither of those options is suitable for my use case, which is that I need a fully portable implementation.

The Dec 2017 forum post (Using local images for texture?) is out-dated and/or just doesn’t help me.

There are a lot of tips in the proposed solutions I’ve read about online, but none of them create a single working solution. Please provide a working example of everything needed to add something with an image to a scene.

Specifically, I am trying to get a map of earth onto a sphere. (Bonus points for a map of earth on an oblate spheroid).

What do you mean by “portable”, here? If you’d like to put the project online, it will eventually need to be hosted somewhere. You mean that you don’t want your project to be dependent on the particular way you’re viewing it locally while developing?

You don’t need to set up a real web server to run locally, but you can’t simply open the file in your web browser off of your hard disk. You will have to do something like one of the options in how to run things locally. Also, Servez might be an easy one to get started with.

Please choose one of the options documented there, or something else, and then describe the issues that you have run into with it — without knowing what error you are actually seeing, we can’t tell you why whatever you’re trying isn’t working.

the era of local testing is over, neither chrome nor firefox now allow reading local files from js. you have to run a web server at 127.0.0.1 now.

if you absolutely must avoid running a web server, use data urls.

1 Like

already tried what y’all suggested. nothing works

We wouldn’t have a “how to run things locally” page if it running things locally weren’t possible and important. You’ll have to share enough about what you’re doing to explain what’s going wrong — “nothing works” does not help us to help you.

running things locally is not possible and yes, it is important… well… let’s see…

i thought you were just there to tell me i shouldn’t try to do what i was doing, lol. but y’all still aren’t addressing the issue… it’s not about what i can or can’t do… it’s about how it cannot be done without some crazy workaround like base64, and i tried that, but i don’t know if THREE.js is expecting a file name and won’t work with base64 in one place or another, or— just how to integrate that… i just cannot get my head around how it won’t load an image!

The AOL Browser in 1995 could load an image. How is this progress?

well the browser can load local image as long as javascript cant read it (and send over the internet to someone, for example). which is why you cant use it as a texture among other things - so, less freedom, more security, this is the progress for you.

already tried what y’all suggested. nothing works

@donmccurdy

We wouldn’t have a “how to run things locally” page if it running things locally weren’t possible

One of us made poor choice of words, either me or you or who ever wrote that wiki. Running stuff from file:// urls no longer works, that is what I mean when I say “locally”. And that wiki does a disservice brushing it off as something that is easy to fix in browser settings.

1 Like

Heh, yeah the phrasing could be improved. As you said, file:// URLs that would have worked in 1995 do not work today — this is browser security changes, and no JavaScript library can affect that.

1 Like

cubetronic wrote: The AOL Browser in 1995 could load an image. How is this progress?

Back in those days one could do wonders with IE & ActiveX, not possible today with these so called modern browsers.
I see the benefited of testing your programs locally, but the way these browsers are heading, is getting more difficult.
I know of 4 working options tested on Window 10.

1 - Web Server on Localhost.
2 - Change setting, Chrome 80 initiated with flag, FireFox 72 with about:config.
3 - DataURL ( Base64 ) embed in external JS file or saved in localStorage.
4 - Edge 18, you can even run modules on this beast.

If you need assistant with option 2 or 3, would be glad to oblige.

That sounds interesting. Where can I find information or instructions on this?

In early 2019 you could load local textures if the html page was local (Firefox). I had mentioned this as a possibility in my posts in the forum. But also Firefox had to close down due to some hacks.

You can convert an image to a data URI using tools like https://ezgif.com/image-to-datauri. The Data URI then works just like a URL, except no network request. On average that will increase the image size by 20-30%, so it’s not ideal for big images or finished apps, but it’s handy now and then. :slight_smile:

hofk wrote: In early 2019 you could load local textures if the html page was local (Firefox)

This might help:
https://discourse.threejs.org/t/cant-run-html-files-in-chrome-locally/12746/6

hofk wrote: That sounds interesting. Where can I find information or instructions on this?

You need Drag and Drop API, and File API to get file content.
Encoded content to Base64.
Create a string containing innerHTML of external JS file that returns encoded content.
Encoded string_innerHTMLt to Base64.
Create a link element and force the browser to download it

To use of local textures in local development / for copying examples and local use.
( see also Can't run html files in Chrome locally )

I have tried a few things to see what is easiest for beginners.


Web Server for Chrome was running quite well at first and I was already cheering until suddenly the update did not work anymore. I had old versions. It’s a nasty thing to do because you think you’ve made a mistake. And I’m an expert in mistakes!


node.js makes more effort and is a bit cryptic. Can scare off beginners when errors occur.


Manipulation of the security settings in the browser.
The warnings issued are very justified. I would not do that with my work and test browsers. In my scatterbrains I would eventually forget to have the right attitude when I am online. Besides, the switching is annoying.

In the docs: https://threejs.org/docs/index.html#manual/en/introduction/How-to-run-things-locally “You may want to create a separate browser profile / shortcut used just for local development to be safe.”

One could possibly confuse it and still surf with the insecure browser.

This is my idea:
There are many special browsers that you do not need yourself.
For example, if they are based on Firefox, you can set the settings permanently and use the browser only as a local development browser. Because of their different appearance you can not mix up the browsers by mistake.

I have only tried https://www.seamonkey-project.org/releases/2.49.5.

If you set it to offline, the browser remembers this when you restart. You do not have to bother.

Allow local textures:
about:config ( in addressbar ) - click on “Accept the Risk and Continue” ( if is visible ) set privacy.file_unique_origin to false
However, the privacy.file_unique_origin did not exist. This is not a problem:

Right-click - New - Boolean
insert: privacy.file_unique_origin
OK and use false

Now I have my browser window with the development example, my editor.
I save the change and press F5 in the browser. Done, as easy as it was in old times. :slightly_smiling_face: