Base URL
Define a string that will be prepended to all relative sources and hrefs in your HTML.
Usage
Configure it with url.base in your config:
export default defineConfig({
url: {
base: 'https://cdn.example.com/emails/',
},
})
Before:
<img src="hero.jpg">
Result:
<img src="https://cdn.example.com/emails/hero.jpg">
Only relative URLs are rewritten, absolute URLs are left untouched.
By default, all standard tags are processed: a, img, video, source, link, script, and others. URLs in <style> tags (url() values), inline style attributes, VML elements (v:image, v:fill), and MSO conditional comments are also handled. The srcset attribute is also processed, with each URL in the set being rewritten.
Customization
Pass an object for fine-grained control over which tags and attributes are processed.
export default defineConfig({
url: {
base: {
url: 'https://cdn.example.com',
tags: ['img', 'source'],
styleTag: true,
inlineCss: true,
},
},
})
url
Type: string
The base URL to prepend to relative paths.
tags
Type: string[] | Record<string, any>
Default: all standard tags
Limit processing to specific HTML tags. Pass an array of tag names to only rewrite URLs in those elements.
attributes
Type: Record<string, any>
Custom attribute-to-URL mappings for non-standard attributes.
styleTag
Type: boolean
Default: true
Whether to process url() values inside <style> tags.
inlineCss
Type: boolean
Default: true
Whether to process url() values in inline style attributes.
API
import { base } from '@maizzle/framework'
// Just a URL — applied with the built-in tag/attribute defaults
const out = base('<img src="hero.jpg">', 'https://cdn.example.com/')
// Object form for finer control
const limited = base(html, {
url: 'https://cdn.example.com/',
tags: ['img'],
styleTag: false,
inlineCss: false,
})
The first argument is an HTML string. The second is either a base URL string or a BaseUrlOptions object — the same shape accepted under url.base in the config (url, tags, attributes, styleTag, inlineCss). Returns the transformed HTML string.