CODEWITHSUNDEEP
aframe
Jeez Us
Jeez Us

Reputation: 1

I cannot add an image in aframe

I am trying to wrap my head around this. I have used aframe for a few other things with no problem. I am trying to get an image to display on aframe. This is the code I am using.

<!DOCTYPE html>
<html>
    <head>
       <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    </head>
    
    <body>
        <a-scene>
            <a-assets>
                <img id="my-image" src="assets/cowboy.jpg">
            </a-assets>

            <!-- Using the asset management system. -->
            <a-image src="#my-image" width="16" height="9"></a-image>

            <!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
            <!--<a-image src="assets/cowboy.jpg" width="16" height="9"></a-image>-->
        </a-scene>
    </body>
</html>

This is the glitch page hosting this code: https://nonstop-bramble-leaf.glitch.me

The code is taken directly from aframe.io. I have tried using imaged hosted online and also using assets uploaded to glitch. This is a total noob question but please help me understand. Thank you!

Upvotes: 0

Views: 567

Answers (1)

Piotr Adam Milewski
Piotr Adam Milewski

Reputation: 14645

The assets on glitch aren't a usable subdirectory,

<img id="my-image" src="assets/cowboy.jpg">

You have to go to the assets folder, click on an asset, copy the actual URL:

<img id="my-image" src="https://cdn.glitch.com/59a9c00b-1ef0-4ec8-8cb6-8313232369e0%2Fcowboy.jpg">

And it should be working properly.

Upvotes: 1

Related Questions