Umbraco

Integration between Umbraco and the image module.

This provider is designed for images served through Umbraco's built-in ImageSharp-based image processing pipeline.

To use this provider, configure the base URL of your Umbraco site:

export default defineNuxtConfig({
  image: {
    umbraco: {
      baseURL: 'https://your-umbraco-site.com'
    }
  }
})

You can then use the provider with NuxtImg or NuxtPicture:

<NuxtImg
  provider="umbraco"
  src="/media/abcd1234/example.jpg"
  width="800"
  height="450"
  format="webp"
  :quality="80"
/>

Options

baseURL

• Type: String
• Default: ''

Base URL for your Umbraco site. This is prepended to relative image paths such as /media/....

If you already pass absolute Umbraco media URLs as src, baseURL can be omitted:

<NuxtImg
  provider="umbraco"
  src="https://your-umbraco-site.com/media/abcd1234/example.jpg"
  width="800"
  height="450"
/>

Modifiers

The Umbraco provider maps Nuxt Image modifiers to Umbraco/ImageSharp query parameters:

If only one of width or height is provided, the original aspect ratio is preserved.

fit

Supported values:

• boxpad
• crop
• manual
• max
• min
• pad
• stretch
• contain
• cover

The standard Nuxt Image values contain and cover are mapped to their ImageSharp equivalents: contain becomes rmode=max and cover becomes rmode=crop.

<NuxtImg
  provider="umbraco"
  src="/media/abcd1234/example.jpg"
  width="1200"
  height="630"
  fit="max"
/>

focalPointXY

Use focalPointXY when you want to crop around an exact focal point. The value must be a comma-separated x,y pair between 0 and 1.

<NuxtImg
  provider="umbraco"
  src="/media/abcd1234/example.jpg"
  width="400"
  height="400"
  format="webp"
  :modifiers="{ focalPointXY: '0.55,0.58', fit: 'crop' }"
/>

anchorPosition

Use anchorPosition to control how the image is anchored when using resize modes such as crop or pad.

Supported values:

• top
• topleft
• topright
• left
• center
• right
• bottom
• bottomleft
• bottomright

<NuxtImg
  provider="umbraco"
  src="/media/abcd1234/example.jpg"
  width="800"
  height="400"
  :modifiers="{ fit: 'crop', anchorPosition: 'top' }"
/>

sampler

Use sampler to control the resampling algorithm used during resize operations.

Supported values:

• bicubic
• nearest
• box
• mitchell
• catmull
• lanczos2
• lanczos3
• lanczos5
• lanczos8
• welch
• robidoux
• robidouxsharp
• spline
• triangle
• hermite

<NuxtImg
  provider="umbraco"
  src="/media/abcd1234/example.jpg"
  width="600"
  height="338"
  :modifiers="{ sampler: 'lanczos3' }"
/>

Notes

ImageSharp and Umbraco processing

Umbraco uses ImageSharp.Web for image processing, so this provider works by generating the same query parameters Umbraco already understands for resize, format, quality, focal point and related operations.

Set crops

Umbraco supports using set crops for images. These however, aren't currently supported.

HMAC protected image URLs

If your Umbraco setup has Umbraco:CMS:Imaging:HMACSecretKey enabled, image requests can require an HMAC signature.

This provider does not currently generate that signature, so transformed URLs may be rejected unless signing is handled elsewhere.

Resize limits

Umbraco can enforce maximum resize dimensions through its imaging settings. If the requested dimensions exceed your configured limits, resizing may not be applied.

Example

<template>
  <NuxtImg
    provider="umbraco"
    src="/media/hvjlhtfw/home-full-screen-4.png"
    width="500"
    height="200"
    format="webp"
    :quality="60"
    :modifiers="{
      fit: 'crop',
      focalPointXY: '0.5488476724567298,0.5772994963168611'
    }"
  />
</template>

More information

For the underlying processing behavior and available resize semantics, see the Umbraco Image Cropper docs and the ImageSharp processing commands docs.