X3DOM ImageTexture url not finding local files

Question

I am trying to make an X3DOM box shape containing an "ImageTexture" that accesses a local file. However, it seems to only be able to find my pictures when I give the "url" attribute an https:// link. Here is my code and the folder setup of the local picture file and html doc; "index.html" is the html file my code is from and "one.png" is the png picture I am trying to load onto the shape:

            <transform translation = "1.75 0 0">
                <shape>
                    <appearance>
                        <!--<material diffuseColor = "0 1 1"></material>-->
                        <ImageTexture  url="one.png"></ImageTexture>
                    </appearance>
                    <box size = "0 4 4"/>
                </shape>
            </transform>



            .
            ├── index.html
            ├── one.png
            ├── pics
            │   ├── 1.png
            │   ├── 2.jpeg
            │   ├── 3.jpeg
            │   ├── 4.png
            │   ├── 5.png
            │   └── 6.jpeg
            ├── style.css
            ├── test.html
            ├── x3dom.css
            └── x3dom-full.js

            1 directory, 12 files

The box shows up when I use the "material" tag, just not with images from local files. I am using the latest version of x3d - 1.8.1, what could be the issue for the images not showing up?

Answer 1

First I would try with another picture (maybe a JPEG) to be sure it's not related to the picture itself. You can also test the picture by opening it with a photo editor. I know it sounds stupid but it happened to me.

Then, or maybe this should be the first test, look in the console (I suppose it's in the web so look for the console settings -> more tools -> developer tools) to see what error message you receive. That'll probably solve your issue.

Third, again might sound stupid but it can happen, put the absolute path to the image (e.g. url="C:/myPics/whatever/one.png"). Also you can try just adding "./" before the image name, e.g. url="./one.png"

Hope this helps!

Answer 2

The reason is pretty simple: X3DOM uses XMLHttpRequest which was not made to use the file:// protocol (although MDN states otherwise https://developer.mozilla.org/de/docs/Web/API/XMLHttpRequest).

However you could try to pass by it by specifying the full path: For Linux/Mac:

<transform translation = "1.75 0 0">
  <shape>
    <appearance>
      <!--<material diffuseColor = "0 1 1"></material>-->
      <ImageTexture  url="file:///home/bob/x3dom/one.png"></ImageTexture>
    </appearance>
    <box size = "0 4 4"/>
  </shape>
</transform>

For Windows:

<transform translation = "1.75 0 0">
  <shape>
    <appearance>
      <!--<material diffuseColor = "0 1 1"></material>-->
      <ImageTexture  url="file://C:/path/to/one.png"></ImageTexture>
    </appearance>
    <box size = "0 4 4"/>
  </shape>
</transform>

Furthermore in the past you had to pass some flags to the browsers in order to make it even possible see https://stackoverflow.com/a/30701845/698496 and How to launch html using Chrome at "--allow-file-access-from-files" mode?

If you are not familiar with running Apache or IIS you could use a Simple Python Server: https://doc.x3dom.org/gettingStarted/pythonSimpleHTTP/index.html