<a-image>

The image primitive shows an image on a flat plane.

Example

<a-scene>
<a-assets>
<img id="my-image" src="image.png">
</a-assets>
<!-- 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>
</a-scene>

Attributes

AttributeComponent MappingDefault Value
colormaterial.color#FFF
heightgeometry.height1
metalnessmaterial.metalness0
opacitymaterial.opacity1
repeatmaterial.repeatNone
roughnessmaterial.roughness0.5
segments-heightgeometry.segmentsHeight1
segments-widthgeometry.segmentsWidth1
shadermaterial.shaderflat
sidematerial.sidefront
srcmaterial.srcNone
transparentmaterial.transparentfalse
widthgeometry.width1

Fine-Tuning

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>