# Image (`ImageSprite`) (/start/canvas-image)



The [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) component extends the [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite) component, so you can use all the methods and properties of [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite). It is used to display a single image on the canvas.

<CodeBlockTabs defaultValue="main.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="main.ts">
      main.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="src/assets/manifest.gen.json">
      src/assets/manifest.gen.json
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="main.ts">
    ```ts
    import { canvas, ImageSprite } from "@drincs/pixi-vn";

    let alien = new ImageSprite(
        {
            anchor: { x: 0.5, y: 0.5 },
            x: 100,
            y: 100,
        },
        "alien",
    );

    await alien.load();
    canvas.add("alien", alien);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="src/assets/manifest.gen.json">
    ```json
    {
        "bundles": [
            {
                "name": "image",
                "assets": [
                    {
                        "alias": "alien",
                        "src": "./assets/image/eggHead.png"
                    }
                ]
            }
        ]
    }
    ```
  </CodeBlockTab>
</CodeBlockTabs>

Compared to the [`Sprite`](/jsdoc/pixi-vn/index/classes/Sprite) component, [`ImageSprite`](/jsdoc/pixi-vn/index/classes/ImageSprite) adds the following features:

* [`load`](/jsdoc/pixi-vn/index/classes/ImageSprite#load): Loads the image URL and sets the resulting texture to the component.
* Additional positioning: <DynamicLink href="/start/canvas-position">align and position with percentage</DynamicLink>.

## Show [#show]

The simplest way to show an image on the canvas is to use the [`showImage`](/jsdoc/pixi-vn/index/functions/showImage) function. This function combines [`load`](/jsdoc/pixi-vn/index/classes/ImageSprite#load) and [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add).

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { newLabel, showImage } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            // Show the images on the canvas
            let alien1 = await showImage("alien");
            // Show the image with a different alias and position
            let alien2 = await showImage("alien2", "alien", {
                xAlign: 0.5,
            });
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "alien",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="canvas/image-sprite-show" />

## Add [#add]

To add an image to the canvas, use the [`addImage`](/jsdoc/pixi-vn/index/functions/addImage) function. This function only adds the component to the canvas; it does **not** show it or load its texture. It uses [`canvas.add`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#add) to add the component to the canvas.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/index.ts">
      assets/index.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import { addImage, canvas, ImageSprite, newLabel } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        () => {
            // Add the images to the canvas
            let alien1 = addImage("alien");
            // Add the image with a different alias and position
            let alien2 = addImage("alien2", "alien", {
                xAlign: 0.5,
            });
        },
        async () => {
            let alien1 = canvas.find<ImageSprite>("alien");
            let alien2 = canvas.find<ImageSprite>("alien2");
            // Load the textures
            alien1 && (await alien1.load());
            alien2 && (await alien2.load());
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/index.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    export const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "alien",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                ],
            },
        ],
    };
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<PixiVnExample path="canvas/image-sprite-add" />

## Remove [#remove]

As with other canvas components, you can remove this component using the [`canvas.remove`](/jsdoc/pixi-vn/index/interfaces/CanvasManagerInterface#remove) function.