<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 1.6.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	true
width	geometry.width	1

Fine-Tuning

Ensuring that the image is not distorted by stretching requires us to appropriately set the width and height preserving the original aspect ratio of the image. This properties are set in meters, don’t confuse with pixels.

For example, a 2:1 image:

<a-image src="#logo" width="3" height="1.5"></a-image>