astro-img

astro-img 🖼️

This Astro integration provides an image component.

Installation

There are two ways to add integrations to your project. Let's try the most convenient option first!

astro add command

Astro includes a CLI tool for adding first party integrations: astro add. This command will:

1. (Optionally) Install all necessary dependencies and peer dependencies
2. (Also optionally) Update your astro.config.* file to apply this integration

To install astro-img, run the following from your project directory and follow the prompts:

# Using NPM
npx astro add astro-img
# Using Yarn
yarn astro add astro-img
# Using PNPM
pnpx astro add astro-img

Install dependencies manually

First, install the astro-img integration like so:

npm install -D -E astro-img

Then, apply this integration to your astro.config.* file using the integrations property:

astro.config.ts

import type { AstroUserConfig } from "astro";
import img from "astro-img";

export default (): AstroUserConfig => {
	return {
		integrations: [img()],
	};
};

Getting started

You can override any of the default options from the configurations of:

• sharp

or disable them entirely:

import type { AstroUserConfig } from "astro";
import img from "astro-img";

export default (): AstroUserConfig => {
	return {
		integrations: [
			img({
				img: false,
			}),
		],
	};
};

If your path is different than dist be sure to update it accordingly:

import type { AstroUserConfig } from "astro";
import img from "astro-img";

export default (): AstroUserConfig => {
	return {
		outDir: "./build",
		integrations: [
			img({
				path: "./build",
			}),
		],
	};
};

Set logger to 0 if you do not want to see debug messages. Default is 2.

import type { AstroUserConfig } from "astro";
import img from "astro-img";

export default (): AstroUserConfig => {
	return {
		integrations: [
			img({
				logger: 0,
			}),
		],
	};
};