--- title: "image" description: "image" language: "en" canonical: "https://g2.antv.antgroup.com/en/manual/core/mark/image/" version: "5.4.8" --- [Resource index](/llms.txt) ## Overview The `image` mark usually does not appear independently and is mainly used as an addition to other marks, which can enhance the visual effect of data and help convey information more intuitively. It is very similar to the [`point`](/en/manual/core/mark/point/) mark, both using `x` and `y` data channels for centered positioning. The difference is that `image` provides a special `src` data channel to specify the remote address or base64 of the image. ```ts import { Chart } from '@antv/g2'; const chart = new Chart({ container: 'container', }); chart.options({ width: 200, height: 60, type: 'image', data: [ { x: '1', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original', }, { x: '2', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original', }, { x: '3', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original', }, { x: '4', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qCegRabhuUIAAAAAAAAAAAAAemJ7AQ/original', }, { x: '5', y: 1, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original', }, { x: '1', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original', }, { x: '2', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*TRZHTaTeWfEAAAAAAAAAAAAAemJ7AQ/original', }, { x: '3', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*qCegRabhuUIAAAAAAAAAAAAAemJ7AQ/original', }, { x: '4', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original', }, { x: '5', y: 2, url: 'https://mdn.alipayobjects.com/huamei_qa8qxu/afts/img/A*GNP1RLFfQV0AAAAAAAAAAAAAemJ7AQ/original', }, ], // Configure visual channels encode: { x: 'x', // Configure x channel y: 'y', // Configure y channel src: 'url', // Configure image src channel }, axis: { x: false, y: false }, }); chart.render(); ``` For more examples, you can visit the [Chart Examples - Image](/en/examples/general/image/) page. ## Configuration | Property | Description | Type | Default | Required | | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | ------- | -------- | | encode | Configure the visual channels of the `image` mark, including `x`, `y`, `src`, `size`, etc., to specify the relationship between visual element properties and data | [encode](#encode) | - | ✓ | | style | Configure the graphic style of the `image` mark | [style](#style) | - | | ### encode Configure the visual channels of the `image` mark. | Property | Description | Type | Default | Required | | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------- | ------- | -------- | | x | Bind the `x` property channel of the `image` mark, usually a numeric or character value from `data` to determine the `x` position of the image | [encode](/en/manual/core/encode/) | - | ✓ | | y | Bind the `y` property channel of the `image` mark, usually a numeric or character value from `data` to determine the `y` position of the image | [encode](/en/manual/core/encode/) | - | ✓ | | size | Bind the `size` channel of the `image` mark to control the display size of the image. Generally, the more information stored in the image, the more it needs to be enlarged | [encode](/en/manual/core/encode/) | - | | | src | Bind the `src` image channel of the `image` mark, which will display images based on the corresponding data | | - | ✓ | #### src The final rendering is handled by G, so the supported data types are consistent with G's atomic Image graphic, supporting: 1. `Remote URL`: Network address 2. `file`: Local image path 3. `base64`: Chart base64 format string 4. `blob`: Blob object returned from image request ### style | Property | Description | Type | Default | Required | | ------------- | ---------------------------------------------------------------------------------------------------------------------- | -------------------------------- | --------- | -------- | | width | Width of the graphic. If not configured, the image is displayed by default according to its natural width and `size` | _number_ \| _Function\_ | - | | | height | Height of the graphic. If not configured, the image is displayed by default according to its natural height and `size` | _number_ \| _Function\_ | - | | | opacity | Overall opacity of the graphic | _number_ \| _Function\_ | - | | | shadowColor | Shadow color of the graphic | _string_ \| _Function\_ | - | | | shadowBlur | Gaussian blur coefficient of the graphic shadow | _number_ \| _Function\_ | - | | | shadowOffsetX | Horizontal distance of the shadow from the graphic | _number_ \| _Function\_ | - | | | shadowOffsetY | Vertical distance of the shadow from the graphic | _number_ \| _Function\_ | - | | | cursor | Mouse cursor style. Same as CSS cursor style, default 'default' | _string_ \| _Function\_ | `default` | | Try it out: ```ts import { Chart } from '@antv/g2'; const Avatars = [ 'https://gw.alipayobjects.com/zos/antfincdn/z8eXl6l9GM/aiyin.jpg', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*cu6GQ7yNpJIAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*IFYESbDDqI0AAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*z6bUQ7bvuAYAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*zIFOTbhtCoMAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*z9SnQpiMnIgAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*aGTWQKFIx2cAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/zos/antfincdn/n%26uTxqsNHe/IMG_3154.JPG', 'http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/antfincdn/sX13FkC4%26C/erling.jpg', 'https://gw.alipayobjects.com/zos/antfincdn/4VUXCQEiBd/c4f901c7-f591-4616-8dfc-83aecf839cd8.png', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*5kqTSZE-9KMAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*_OhHTo0gxAMAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/zos/antfincdn/aXQ3OTu6Er/IMG_3509.JPG', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*blSIQbwdOqsAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*rVgGS5sJwHQAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*gB63QppvTsgAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/zos/antfincdn/AefmmqKied/3ca2b3d8-e568-4bec-b10d-e4e432cb6f23.png', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*iBIzSZMCWRcAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*GHQQQYTL4g8AAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*VXoNRoRXPBwAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*WZcQRJtWWlIAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*-wAXRKlOrW4AAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*LSpRS6i_WOcAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*23r_SpWxPdEAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*R3QzTpZM7IUAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*vU-mRr0XrfcAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*LMcOQKUxbUEAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*8CiTTqjnzcEAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/zos/antfincdn/smBVaflWk5/my.jpg', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*V7E0RqRAlG4AAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*_E0SR4LCxaAAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*PmifSa53auQAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*mWkGRqxLexYAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*CPXKQ76YlfwAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/zos/antfincdn/c9K5r1m%26y9/d0b8a090-f034-43e6-aeeb-f59cb6c7c33c.png', 'https://gw.alipayobjects.com/zos/antfincdn/L%261dAufvjL/IMG_1477.JPG', 'https://gw.alipayobjects.com/zos/antfincdn/NkfCEL7RTL/7cdd44fc-8624-4b6c-8947-67f78e79142f.png', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*dl_gToTY6msAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*QFEMTaidg9QAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/zos/antfincdn/KGawdl9Ahq/touxiang.JPG', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*y1cFS4MDmPIAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_23b644/afts/img/A*qykaTLGttsgAAAAAAAAAAABkARQnAQ', 'https://gw.alipayobjects.com/zos/antfincdn/QL5d8rcf%24M/IMG_6534.JPG', 'https://gw.alipayobjects.com/mdn/rms_04a9e5/afts/img/A*ZmohRYwarWcAAAAAAAAAAAAAARQnAQ', 'https://gw.alipayobjects.com/mdn/rms_04a9e5/afts/img/A*1O_3R4Wcwy0AAAAAAAAAAAAAARQnAQ', ]; // Code from https://juejin.cn/post/6995818748191981604 function getLovePoints() { let angle = 0; let x = 0; let y = 0; const a = 6; const points = []; for (let i = 0; i < 20; i += 0.2) { angle = i / Math.PI; x = a * (16 * Math.sin(angle) ** 3); y = a * (13 * Math.cos(angle) - 5 * Math.cos(2 * angle) - 2 * Math.cos(3 * angle) - Math.cos(4 * angle)); points.push({ x, y }); } return points; } const chart = new Chart({ container: 'container', autoFit: true, padding: 40, }); chart.options({ type: 'image', data: getLovePoints(), encode: { x: 'x', y: 'y', src: (_, idx) => Avatars[idx % Avatars.length], size: 48, }, style: { opacity: 0.7, shadowColor: '#fad7e0', shadowBlur: 40, shadowOffsetY: 20, }, axis: false, tooltip: false, }); chart.render(); ```