Picsum

Integration between Lorem Picsum and the image module.

Lorem Picsum provides random placeholder images. It is useful during development or for demo purposes.

To use this provider you just need to enable it in your Nuxt config:

export default defineNuxtConfig({
  image: {
    picsum: {}
  }
})

Usage

Random image

Get a random image with specific dimensions:

<NuxtImg
  provider="picsum"
  src="/"
  width="200"
  height="300"
/>

Specific image by ID

Use id/{id} as the src to get a specific image:

<NuxtImg
  provider="picsum"
  src="id/237"
  width="200"
  height="300"
/>

Seeded random image

Use seed/{seed} as the src to get a consistent random image based on a seed string:

<NuxtImg
  provider="picsum"
  src="seed/picsum"
  width="200"
  height="300"
/>

Modifiers

grayscale

Return the image in grayscale.

<NuxtImg
  provider="picsum"
  src="id/870"
  width="300"
  height="200"
  :modifiers="{ grayscale: true }"
/>

blur

Apply a blur effect to the image. Accepts values from 1 to 10.

<NuxtImg
  provider="picsum"
  src="id/1025"
  width="250"
  height="250"
  :modifiers="{ blur: 5 }"
/>