You can refer to the <image> element of SVG.

The following example defines an image with a top-left vertex position of (200, 100).

const image = new Image({
    style: {
        x: 200,
        y: 100,
        width: 200,
        height: 200,
        src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
    },
});

Usually we are used to centering on the image, which can be modified by the anchor anchor.

const image = new Image({
    style: {
        //...
        anchor: [0.5, 0.5],
    },
});

Inherited from

Inherits style property from DisplayObject.

anchor

The default value is [0, 0]. For details, see DisplayObject's anchor.

transformOrigin

The default value is left top. For details, see DisplayObject's transformOrigin.

Additional Properties

x

The x-axis coordinates of the top-left vertex of the image in the local coordinate system.

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/x

y

The y-axis coordinates of the top-left vertex of the image in the local coordinate system.

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/y

src

Image sources, supports the following types:

• string Image address string, displayed after successful loading
• HTMLImageElement Create your own Image object to create a G Image in the onload callback, as shown in the following example.

import { Image as GImage, Canvas } from '@antv/g';

let image;
const img = new Image();

img.src =
    'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ';
img.crossOrigin = 'Anonymous';
img.onload = () => {
    image = new GImage({
        style: {
            x: 200,
            y: 100,
            width: 200,
            height: 200,
            src: img,
        },
    });
    canvas.appendChild(image);
};

width

Image width.

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/width

height

Image height.

https://developer.mozilla.org/zh-CN/docs/Web/SVG/Attribute/height

keepAspectRatio

Whether to keep aspect ratio, when enabled we can only provide height or width, the missing item will be calculated according to raw ratio. Example

const image = new Image({
    style: {
        width: 200,
        keepAspectRatio: true,
        src: 'https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*N4ZMS7gHsUIAAAAAAAAAAABkARQnAQ',
    },
});

isBillboard

Whether or not to always face the camera in 3D scenes, defaults to false, also known as the "billboard effect".

In example, the image is rendered compressed when the camera is rotated without being turned on:

Turning it on doesn't change the position of the image, but it will always face the camera. This is in line with what is usually required for 2D graphics like text in 3D scenes:

billboardRotation

Rotation angle in billboard mode, clockwise in radians.

In example, we add a rotation angle to the image:

image.style.isBillboard = true;
image.style.billboardRotation = Math.PI / 8;

isSizeAttenuation

Whether or not to apply size attenuation in perspective projection. This option can be turned on if you want to keep the size consistent regardless of depth, following the "near big, far small" visual effect in perspective projection.

In example, we enable size attenuation for image:

image.style.isSizeAttenuation = true;