Note: This documentation is for the old 0.8.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

The image primitive shows an image on a flat plane.


<img id="my-image" src="image.png">

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

<!-- Defining the URL inline. Not recommended but more comfortable for web developers. -->
<a-image src="another-image.png"></a-image>


Attribute Component Mapping Default Value
color material.color #FFF
height geometry.height 1
metalness material.metalness 0
opacity material.opacity 1
repeat material.repeat None
roughness material.roughness 0.5
segments-height geometry.segmentsHeight 1
segments-width geometry.segmentsWidth 1
shader material.shader flat
side material.side front
src material.src None
transparent material.transparent false
width geometry.width 1


Ensuring that the image is not distorted by stretching requires us to appropriately set the width and height.

<a-image src="#logo" width="200" height="100"></a-image>