---
title: "Add an image annotation to PDF using JavaScript | Nutrient"
canonical_url: "https://www.nutrient.io/guides/web/annotations/create-edit-and-remove/add-image/"
md_url: "https://www.nutrient.io/guides/web/annotations/create-edit-and-remove/add-image.md"
last_updated: "2026-05-19T11:59:04.496Z"
description: "Add an image annotation to PDF using JavaScript | guide for Nutrient Web SDK with detailed instructions and code examples."
---

# Add image annotations to PDFs using JavaScript

Add images to your document using the [Image Annotation API](https://www.nutrient.io/api/web/NutrientViewer.Annotations.ImageAnnotation.html).

[Try for free](https://www.nutrient.io/sdk/web/getting-started.md)

[Launch demo](https://www.nutrient.io/demo/add-image-annotation)

First, convert the image you want to use into a `Blob`. Here's an example of how to do that with a remote image:

```js

const request = await fetch("https://example.com/image.jpg");
const blob = await request.blob();

```

Now, use the [`instance#createAttachment`](https://www.nutrient.io/api/web/NutrientViewer.Instance.html#createAttachment) method to convert it into an attachment that stores the image inside your PDF:

```js

const imageAttachmentId = await instance.createAttachment(blob);

```

To display this image attachment in the PDF itself, create an image annotation with a MIME type, attachment, description, and bounding box.

Finally, call `create` so that the SDK updates with this new annotation:

```js

const annotation = new NutrientViewer.Annotations.ImageAnnotation({
  pageIndex: 0,
  contentType: "image/jpeg",
  imageAttachmentId,
  description: "Example Image Annotation",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 10,
    top: 20,
    width: 150,
    height: 150
  })
});
instance.create(annotation);

```

## Adding a button for importing image or PDF files

When in standalone mode, it's possible to configure [button form fields](https://www.nutrient.io/api/web/NutrientViewer.FormFields.ButtonFormField.html) to open a dialog where the user can import a JPG, PNG, or PDF file from their device. The imported file is then added to a PDF, replacing the appearance of the button.

It's possible to add this feature to your own buttons by setting the corresponding `action` property:

```js

const widget = new NutrientViewer.Annotations.WidgetAnnotation({
  id: NutrientViewer.generateInstantId(),
  pageIndex: 0,
  formFieldName: "buttonIcon",
  boundingBox: new NutrientViewer.Geometry.Rect({
    left: 100,
    top: 200,
    width: 100,
    height: 100,
  }),
  action: new NutrientViewer.Actions.JavaScriptAction({
    script: "event.target.buttonImportIcon()",
  }),
  borderWidth: 0,
});
const formField = new NutrientViewer.FormFields.ButtonFormField({
  name: "buttonIcon",
  annotationIds: NutrientViewer.Immutable.List([widget.id]),
});
instance.create([widget, formField]);

```

Notice the `event.target.buttonImportIcon()` call in the [JavaScript action](https://www.nutrient.io/api/web/NutrientViewer.Actions.JavaScriptAction.html). This is the method that triggers the image import dialog.
---

## Related pages

- [Annotation flags](/guides/web/annotations/annotation-flags.md)
- [Defining the author of an annotation](/guides/web/annotations/annotation-author-name.md)
- [Detect changes in annotations](/guides/web/annotations/detecting-if-annotations-have-changed.md)
- [Cut, copy, paste, and duplicate annotations in PDF using JavaScript](/guides/web/annotations/create-edit-and-remove/cut-copy-duplicate.md)
- [Select PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/multiple-selection.md)
- [Create PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/create.md)
- [Edit PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/edit.md)
- [Customizing annotation permissions](/guides/web/annotations/create-edit-and-remove/permissions.md)
- [Remove PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/remove.md)
- [Rich text in PDF annotations using JavaScript](/guides/web/annotations/create-edit-and-remove/rich-text.md)
- [Undo and redo annotations](/guides/web/annotations/create-edit-and-remove/undo-redo.md)