https://github.com/bene/astro-remote-picture
Dynamic images with the performance benefits of the Picture and Image components of Astro. 💨
https://github.com/bene/astro-remote-picture
astro astro-integration
Last synced: 7 months ago
JSON representation
Dynamic images with the performance benefits of the Picture and Image components of Astro. 💨
- Host: GitHub
- URL: https://github.com/bene/astro-remote-picture
- Owner: bene
- Created: 2024-03-07T23:52:46.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-05T11:43:23.000Z (about 2 years ago)
- Last Synced: 2025-09-21T20:22:58.490Z (11 months ago)
- Topics: astro, astro-integration
- Language: TypeScript
- Homepage:
- Size: 116 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# astro-remote-pictures
This integration enables you to use dynamic images with the performance benefits of the `` and `` components of Astro.
## Installation
```bash
npm i astro-remote-pictures
```
## Basic example
This example just uses static URLs to demonstrate the basic usage of the integration. It doesn't make much sense to use this for static URLs, but it's a good starting point to understand how it works. See the dynamic example [below](#dynamic-example).
### Configuration
```javascript filename="astro.config.mjs"
import { defineConfig } from "astro/config";
import remotePictures from "astro-remote-pictures";
export default defineConfig({
integrations: [
remotePictures({
collections: [
{
id: "backgrounds",
pictures: [
{
id: "PolarBear",
url: "https://images.unsplash.com/photo-1709048260183-44acb7826928",
},
],
},
],
}),
],
});
```
### Usage
```astro
---
import { Picture } from "astro:assets";
import { PolarBear } from "astro-remote-pictures/wallpapers";
---
```
The `PolarBear` import is a reference to the picture with the ID `PolarBear` from the `backgrounds` collection. The integration automatically generates these references for you. The import path is always `astro-remote-pictures/$collectionId`.
## Dynamic example
This integration really starts to make sense once you want to use images dynamically fetched from an CMS or any other API.
### Configuration
```javascript filename="astro.config.mjs"
import { defineConfig } from "astro/config";
import remotePictures, { toPictureId } from "astro-remote-pictures";
// Fetch wallpapers from API
const wallpapers = await fetch(...)
export default defineConfig({
integrations: [
remotePictures({
fetchOptions: {
headers: {
"Authorization": "Bearer super_secret_token"
}
},
collections: [
{
id: "wallpapers",
pictures: wallpapers.map(wallpaper => ({
id: toPictureId(wallpaper.name),
url: wallpaper.url,
})),
},
],
}),
],
});
```
### Usage
```astro
---
import { Picture } from "astro:assets";
import { toPictureId } from "astro-remote-pictures";
// Import all pictures from the wallpapers collection
import * as wallpaperRefs from "astro-remote-pictures/wallpapers";
// Fetch wallpapers from API
const wallpapers = fetch(...)
---
{wallpapers.map(wallpaper => (
))}
```
### Notes
You can move the `fetch` call to a separate file and import it in your Astro config file and the Astro component to remove code duplication.