<a-image>

NOTE: This version of the documentation tracks unstable development happening on A-Frame’s master branch. If you wish to try it out, grab the unstable build. Otherwise, head to the documentation for the current 0.7.0 version

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

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

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>