A-Frame VR: Image not showing in Chrome

2.5k Views Asked by At

EDIT: The problem was that I ran the HTML file from my own harddrive and not a web server. Everything opened just fine when I put it on my web server and ran it from there.

A-Frame Ver: 0.4.0, Chrome: 55.0.2883.87, Firefox: 50.1.0, OS: Win 10 (64bit).

I am new to A-Frame and am currently playing around with different elements and entities. When I tried to add an image entity but was only met with a blank plane [image]. However, the exact same HTML file opened in Firefox showed the image [image]. I've disabled all potential blockers in Chrome (uBlock Origin, etc.) but the image still doesn't show.

Here is the HTML file I ran in both browsers:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Testing A-Frame</title>
    <meta name="description" content="Testing A-Frame">
    <script src="https://aframe.io/releases/0.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene vr-mode-ui="enabled: true">

    <a-assets>
      <img id="my-image" src="apple_fruit.png">
    </a-assets>

    <a-image position="0 1.5 -2" src="#my-image"></a-image>


      <a-plane rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
      
      <a-entity position="0 0 -1">
        <a-camera>
          <a-cursor></a-cursor>
        </a-camera>
      </a-entity>

    </a-scene>
  </body>
</html>

1

There are 1 best solutions below

1
On

Fixed! The problem was that I ran the HTML file from my own harddrive and not a web server. Everything opened just fine when I put it on my web server and ran it from there.