getImage() must be used on the server.

import DontEditWarning from '~/components/DontEditWarning.astro'

GetImageNotUsedOnServer: getImage() should only be used on the server. To use images on the client, render the src from getImage() during the server render, then pass it to the client for usage.

What went wrong?

The getImage() function is only available on the server. To use images on the client, either render the src from getImage() during the server render so it can be used in client-side scripts, or use a standard `` tag.

---
import { getImage } from "astro:assets";
import myImage from "../assets/my_image.png";

const optimizedImage = await getImage({ src: myImage, width: 300 });
---

<script define:vars={{ imageSrc: optimizedImage.src }}>
  // Use imageSrc in client-side code
  document.getElementById('myImage').src = imageSrc;
</script>

See Also:

• Images
• getImage()