Search code examples
angulartypescriptimageaugmented-realityaframe

Aframe not loading image from local path in angular and arjs

I am trying to load a image from the local path. The code is in app.component.html in angular. here is my code:

  <a-scene embedded arjs>
      <a-assets>
          <img id="test_img" src="/mnt/r/flipkart/proj/src/app/abcd.jpg">
      </a-assets>
      <a-marker preset="hiro" url="hiro.patt">
          <a-image 
              rotation="90 0 0"
              src="#test_img"></a-image>
              <!-- <a-image 
              rotation="90 0 0"
              src="#imge" id="baba"></a-image> -->
      </a-marker>
      <a-entity camera></a-entity>
      <div style='position: fixed; top: 10px; width:100%; text-align: center; z-index: 1;'>
        <button (click)="hideme()">
            HIDE OBJECTS
        </button>
    </div>
  </a-scene>

On console I am getting this message:

GET http://localhost:4200/mnt/r/flipkart/proj/src/app/abcd.jpg 404 (Not Found)

how can I get it to avoid making a get request and just use the images from a local folder.

Solution

  • how can I get it to avoid making a get request

    You can specify, that you want to use the file:// protocol, ie: file:///mnt/r/flipkart/proj/src/app/abcd.jpg

    ALTHOUGH images, videos or audio loaded via the file protocol, won't work with a-frame due to cross-origin policies. If you're developing locally, you will still need a server to host assets.

    The docs recommend:

    • with node - five-server
    • with python - the default SimpleHTTPServer module