@nexus_js/assets
Advanced tools
Nexus asset pipeline — image optimization (AVIF/WebP), font injection, lazy loading
Nexus asset pipeline — image optimization (AVIF/WebP), responsive srcsets, blur placeholders, and font preloading.
The fastest way to serve optimized images in Nexus.
In any .nx template, import Image and interpolate it directly:
---
import { Image } from '@nexus_js/assets';
---
{Image({ src: '/hero.jpg', alt: 'Hero', width: 1200, height: 600 })}
This generates a <picture> element with:
<img>)srcset for breakpoints [320, 640, 960, 1280, 1920]width / height to prevent CLSWhen the image should fill its container:
---
import { Image } from '@nexus_js/assets';
---
<div style="position:relative;width:100%;height:60vh;">
{Image({ src: '/hero.jpg', alt: 'Hero', fill: true, objectFit: 'cover', priority: true })}
</div>
fill removes width/height attributes and applies position:absolute;inset:0 styles. The parent must have position:relative.
For images that appear immediately on load:
{Image({ src: '/hero.jpg', alt: 'Hero', width: 1200, height: 600, priority: true })}
This sets loading="eager", decoding="sync", and fetchpriority="high".
To also preload the image in <head>, return a link from your load():
import { renderImagePreloadLink } from '@nexus_js/assets';
export async function load(ctx) {
return {
head: {
links: [
{ rel: 'preload', as: 'image', href: '/_nexus/image?src=%2Fhero.jpg&w=1200&q=80' },
],
},
};
}
For a smooth loading experience, generate a low-quality placeholder in load():
import { Image, getBlurDataURL } from '@nexus_js/assets';
import { resolve } from 'node:path';
export async function load(ctx) {
const publicDir = resolve(process.cwd(), 'public');
const blurDataURL = await getBlurDataURL('/hero.jpg', publicDir);
return {
hero: { src: '/hero.jpg', alt: 'Hero', width: 1200, height: 600, blurDataURL },
};
}
{Image(pretext.hero)}
Bypass the optimizer for SVGs, GIFs, or when you need the original file:
{Image({ src: '/logo.svg', alt: 'Logo', width: 200, height: 200, unoptimized: true })}
If you don't know the image size ahead of time, read it at runtime:
import { getImageDimensions } from '@nexus_js/assets';
import { resolve } from 'node:path';
export async function load(ctx) {
const publicDir = resolve(process.cwd(), 'public');
const dims = await getImageDimensions('/photo.jpg', publicDir);
return { photo: { src: '/photo.jpg', alt: 'Photo', ...dims } };
}
External URLs are proxied safely through the optimizer:
{Image({ src: 'https://example.com/photo.jpg', alt: 'Remote', width: 800, height: 600 })}
Security checks block private IPs, localhost, and non-HTTP(S) protocols automatically.
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | required | Local path (/hero.jpg) or remote URL |
alt | string | required | Accessible description |
width | number | — | Intrinsic width (prevents CLS) |
height | number | — | Intrinsic height (prevents CLS) |
size | number | — | Square shorthand (sets both width and height) |
sizes | string | auto | sizes attribute for responsive images |
priority | boolean | false | Eager loading + high fetchpriority |
round | boolean | false | border-radius: 50% |
class | string | — | Custom CSS class |
quality | number | 80 | 1–100 compression quality |
formats | ImageFormat[] | ['avif','webp','original'] | Output format priority |
placeholder | 'blur' | 'empty' | 'none' | 'blur' | Loading placeholder strategy |
blurDataURL | string | — | Inline base64 LQIP |
fetchpriority | 'high' | 'low' | 'auto' | auto | Browser fetch priority hint |
fill | boolean | false | Fill parent container |
objectFit | string | 'cover' | CSS object-fit (fill mode) |
objectPosition | string | 'center' | CSS object-position (fill mode) |
unoptimized | boolean | false | Bypass optimization |
style | string | — | Additional inline styles |
Image(props) / renderImage(props) — generate optimized <picture> HTMLimageUrl(src, width, format, quality) — build /_nexus/image?... URLgetImageDimensions(src, publicDir) — read width/height via sharpgetBlurDataURL(src, publicDir) — generate base64 LQIPrenderImagePreloadLink(props) — generate <link rel="preload"> taggenerateBlurDataURL(buffer) — generate LQIP from a BufferblurFromFile(absolutePath) — generate LQIP from diskhandleImageRequest(request, { publicDir }) — HTTP handler for /_nexus/imageSee @nexus_js/assets/fonts for Google Font inlining, preloading, and self-hosted font optimization.
MIT © Nexus contributors
FAQs
Nexus asset pipeline — image optimization (AVIF/WebP), font injection, lazy loading
We found that @nexus_js/assets demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket MCP now lets AI assistants review org alerts, investigate threats using the Socket threat feed, and inspect package files in addition to dependency scoring.
Product
Socket Firewall blocks malicious VS Code and Open VSX extensions before install, protecting developers from compromised editor marketplaces.
Research
More than 140 Mastra npm packages were compromised in a supply chain attack that used a typosquatted dependency to deliver a cross-platform infostealer during installation.