How can I show an image using AR js?

[ghevge]

Hi,
First of all, I've just started playing with AR js. So my knowledge about this library is very basic.

I am trying to display an image, loaded from my server, at a given GPS location. But so far, I only managed to display a black square.

I've started from the Location Based Example available https://github.com/AR-js-org/AR.js, to which I've added an image tag as below:

`<a-scene
		      vr-mode-ui="enabled: false"
		      arjs="sourceType: webcam; videoTexture: true; debugUIEnabled: false;"
		    >
		      <a-image src="./img/locs.png"
		        look-at="[gps-camera]"
		        scale="120 120 120"
		      	gps-entity-place="latitude: ${lat}; longitude: ${lng};"></a-image>
		      <a-text
		        value="This content will always face you."
		        look-at="[gps-camera]"
		        scale="120 120 120"
		        gps-entity-place="latitude: ${lat}; longitude: ${lng};"
		      ></a-text>
		      <a-camera gps-camera rotation-reader> </a-camera>
		    </a-scene>`

the lat & lng are being populated accordingly. Also in the browser network tab, I see the /img/locs.png being loaded.

But in the camera view, I can only see a black square, where the image should be.

What am I missing here?

Thanks

[nickw1]

Does it work if you replace the image with a primitive (box, sphere etc) or a model (GLTF, etc) ?

[ghevge]

The box shows up with the image on it (if I define it as a texture) but it doesn't show up at the location the text shows up (in the direction of my specified location). It either shows up ~90 degrees to the left, or right below where I'm standing.

This is how I've defined the box:

 <a-assets>
     <img id="texture" src="./p/img/addLocs.png">
</a-assets>
<a-box src="#texture"
         look-at="[gps-camera]"
        scale="120 120 120"
	gps-entity-place="latitude: ${lat}; longitude: ${lng};">
</a-box>

[ghevge]

OK,.. found the problem why it was not showing at the right location. A typo on my end.

[ghevge]

Hmm it seems if I use the a-assets approach on the image tag, image will start showing too. Interesting...
Thanks for the hint!