Aframe failing to display image when using local path in Angular with AR.js

I am attempting to load an image from a local path within my Angular app component.html file. Below is the code snippet:

  <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>

The following error message appears in the console when trying to access the image:

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

Is there a way to display the image without making a get request and directly accessing it from a local folder?

angulartypescriptimageaugmented-realityaframe

Answer №1

Is there a way to access the content without triggering a get request?

To achieve this, you can specify using the file:// protocol, like so: 

file:///mnt/r/flipkart/proj/src/app/abcd.jpg

HOWEVER, it's important to note that assets like images, videos, or audio loaded via the file protocol may not function properly with a-frame due to cross-origin policies. If you are working locally, you will still require a server to host these assets.

The documentation suggests the following:

  • If using node - try using five-server
  • If using python - consider using the default SimpleHTTPServer module

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learning to implement the latest language features in JavaScript on older runtimes using TypeScript

Currently, I am faced with a dilemma in my TypeScript project involving the use of flatMap. The issue arises from the fact that this project needs to be compatible with Node.js versions as old as v10, which do not support flatMap. I had assumed that TypeS ...

node.jstypescript

Conditions are in an angular type provider with AOT

I am facing an issue with my Angular project that is compiled using AOT. I am trying to dynamically register a ClassProvider based on certain configurations. The simplified code snippet I am currently using is below: const isMock = Math.random() > 0.5; ...

javascriptangulartypescriptdecoratorangular2-aot

Issue encountered while using Typescript with mocha: Unable to utilize import statement outside a module

Exploring the world of unit testing with mocha and trying to create a basic test. Project Structure node_modules package.json package-lock.json testA.ts testA.spec.ts tsconfig.json tsconfig.json { "compilerOptions": { "target&qu ...

javascriptnode.jstypescriptunit-testingmocha.js

How can Angular JS handle multiple validators being triggered at once?

Hey there, I'm currently working with validators in my Angular form setup. Here's a snippet of how it looks - I utilize Validators.compose to combine custom validators. The errors from these validators are then displayed on the HTML component. My ...

angularjstypescript

What is the importance of using getters for functions involving Moment.js in vueJS and typescript?

weekOfMonth() calculates the current month and week within that month. <template> <h3>{{ weekOfMonth }}</h3> </template> <script lang="ts"> export default class HomeView extends Vue { const moment = require(& ...

typescriptvue.jsmomentjs

Obtain the name of a node using its identification number in D3JS

I am currently working on implementing a generalized tooltip feature. This tooltip will display the name and other relevant data of the active node. For example, if node 3 is currently active, the tooltip will show the name and distance (not link distance) ...

javascriptangularjstypescriptd3.js

Angular version 8.2 combined with Firebase can result in errors such as those found in the `./src/app/app.module.ngfactory.js` file towards the end of the process when attempting to build with

My first time posing a query on this platform, and certainly not my last. The issue at hand involves the ng-build --prod process failing to complete and throwing errors in my Angular 8.2.14 application. I've integrated Firebase into my project succes ...

javascriptangulartypescriptfirebasecompiler-errors

Issue with Stenciljs custom event not triggering using @Listen decorator

I've been trying to grasp the workings of the custom event emitter. While my mouse events seem to be functioning properly, I'm encountering issues with the custom events. Despite emitting correctly, it appears that the listener is not capturing t ...

typescriptionic-frameworkstenciljs

The type 'Observable<boolean>' cannot be assigned to type 'Observable<UserRegistration>'

function completeRegistration(email: string, password: string, firstName: string, lastName: string, location: string): Observable<UserDetails> { let body = JSON.stringify({ email, password, firstName, lastName,location }); let headers = new H ...

angulartypescriptangular-httpangular-httpclientangular-observable

How can I pass Checkbox values to a function in the component in Angular 2?

Hello, I am new to Angular and currently working with NgFor. I have a requirement where I need to display elements that can be selected by the user. Upon selection, I should be able to retrieve the ID in the Component function. However, when I tried usin ...

angular

Tips for utilizing the Fluent UI Northstar Color Palette

When working with Fluent UI Northstar, one helpful feature is the color palette. While the documentation provides a list of color names and gradients that can be found here, it can be confusing on how to actually utilize these values (such as 100, 200, e ...

typescriptcolorsfluentui-react

Searching for a streamlined approach to retrieve a segment of a string

I'm currently working with JavaScript and TypeScript. Within my code, I encountered a scenario where I have a string that might contain certain tags indicating importance or urgency. Here are a couple of examples: A: "Remind me to go to the store to ...

javascriptregexstringtypescript

Sometimes, Express may return the message "not found" on and off

After working with express for many years, I find myself a bit out of practice with TypeScript - and it seems like my eyesight is failing me! This is the first time I've encountered this issue, so I must be missing something... My current dilemma is ...

javascripttypescriptexpresscloud-foundryexpress-router

Are there any @types available for browser extension objects that are interoperable?

I am in the process of developing a browser extension that would work seamlessly on Edge, Chrome, and Firefox by utilizing Typescript. After coming across an article discussing interoperable browser extensions, I stumbled upon a code snippet: window.brow ...

typescripttypescross-browserbrowser-extension

Angular 2 router hybrid application: URL resets after navigation

Each time a route is changed, the correct component is rendered but there seems to be an issue with the path. For example, when navigating from /items to /add-item, the URL changes momentarily but then reverts back. This issue occurs on every page, reg ...

angularangular2-routingangular-router

Server.js experiencing issues with body-parser causing backend to fail loading in browser

Having an issue with my backend server not loading in the browser. It runs fine in terminal, but I can't seem to figure out why it's not working in the browser. I'm new to backend programming and I recently added an app.post method which see ...

node.jsangularexpress

Updating objects in Angular 8 while excluding the current index: a guide

this.DynamicData = { "items": [ { "item": "example", "description": "example" }, { "item": "aa", "description": "bb" }, ...

javascriptangularangular8

An issue occurs with Material Dialog getting stuck when it is triggered by clicking on a Leaflet

I'm currently working on a project that involves using a map with ngx-leaflet. When a user clicks on a marker, I want to display a Dialog from Angular Material. Although the Dialog opens successfully, when I click the close button, it reopens and the ...

angularleafletangular6angular-material-6ngx-leaflet

What is the best way to connect a backend server that is located locally to an Angular frontend?

Currently, my angular app is up and running on an apache server located at http://localhost. However, I also have a backend flask server running on the same machine but on port 5200 (http://localhost:5200). While I can successfully access the backend thro ...

angular

When implementing ngIf conditions within a nested loop of the side menu in Angular 6, the collapse/expand CSS function does not seem to be functioning

this code dynamically binds a nested loop in the sidebar <ul class="nav metismenu" id="side-menu" *ngIf="concatMenulist?.length > 0"> <li *ngFor="let menu1 of concatMenulist"> <!--level 01--> ...

cssangularnested-loops