<!--
{
  "availability" : [
    "MapKit JS: 6.0.0 -"
  ],
  "documentType" : "symbol",
  "framework" : "MapKitJS",
  "identifier" : "/documentation/MapKitJS/ImageAnnotation/image",
  "metadataVersion" : "0.1.0",
  "role" : "Instance Property",
  "symbol" : {
    "kind" : "Instance Property",
    "modules" : [
      "MapKit JS"
    ],
    "preciseIdentifier" : "instp/mapkit.ImageAnnotation/image"
  },
  "title" : "image"
}
-->

# image

The image for the annotation.

```
get image():
    | ImageDelegate
    | ImageHashObject
    | ImageSource
    | Promise<ImageSource>;
set image(
    value:
        | ImageDelegate
        | ImageHashObject
        | ImageSource
        | Promise<ImageSource>,
);
```

## Discussion

Set this property to one of the following:

- An [`ImageHashObject`](/documentation/MapKitJS/ImageHashObject) that contains URLs for images at multiple resolutions.
- An [`ImageDelegate`](/documentation/MapKitJS/ImageDelegate) that dynamically provides the image.
- An [`ImageSource`](/documentation/MapKitJS/ImageSource) such as an `HTMLImageElement`, `HTMLCanvasElement`, `ImageBitmap`, or `OffscreenCanvas`.
- A `Promise` that resolves to an [`ImageSource`](/documentation/MapKitJS/ImageSource).

Using an [`ImageSource`](/documentation/MapKitJS/ImageSource) or a `Promise` gives you control over image loading. For example, you can use the Fetch API with custom headers, apply transformations to an image before display, or implement custom error recovery logic. See [`ImageSource`](/documentation/MapKitJS/ImageSource) for cross-origin requirements.

---

Copyright &copy; 2026 Apple Inc. All rights reserved. | [Terms of Use](https://www.apple.com/legal/internet-services/terms/site.html) | [Privacy Policy](https://www.apple.com/privacy/privacy-policy)