importImage

The importImage API is a function which acts similar to the ESM import() function but for astro-imagetools. It returns a Promise which resolves to the src/srcset of the generated asset/assets. The provided path should follow the same format as the src attribute.

Why?

• It supports dynamic paths
• It supports remote URLs (data URIs are also supported)

Note: The importImage API doesn’t support relative local paths.

Code Example

import React from "react";
import { importImage } from "astro-imagetools/api";

const src = await importImage("https://picsum.photos/1024/768");

export default function ReactImage() {
  return <img src={src} />;
}

You can pass configuration options via query parameters just like regular ESM imports.

import { importImage } from "astro-imagetools/api";

const src = await importImage(
  "https://picsum.photos/1024/768?w=200&h=200&format=avif&q=80"
);

If you want the function to return a srcset instead of a src, pass multiple values to the w or width query parameter.

import { importImage } from "astro-imagetools/api";

const srcset = await importImage(
  "https://picsum.photos/1024/768?w=200;400;800"
);

Dynamic paths are also supported.

---
import { importImage } from "astro-imagetools/api";

const { imagePath } = Astro.props; // imagePath = "/public/images/image.jpeg"

const src = await importImage(imagePath);
---

Return Value

Type: Promise<string>