WithUrl
Rewrites URLs in child elements by prepending a base URL and appending query parameters.
Usage
Prepend a base URL to all relative paths:
<template>
<WithUrl base="https://cdn.example.com/images">
<Img src="hero.jpg" alt="Hero" width="600" />
<Img src="logo.png" alt="Logo" width="120" />
</WithUrl>
</template>
Add tracking parameters to URLs:
<template>
<WithUrl parameters="utm_source=email&utm_campaign=welcome">
<Button href="https://example.com/shop">Shop Now</Button>
<Link href="https://example.com/about">About Us</Link>
</WithUrl>
</template>
You can use both props together:
<template>
<WithUrl base="https://cdn.example.com" parameters="v=2">
<Img src="hero.jpg" alt="Hero" width="600" />
</WithUrl>
</template>
The component recursively processes all descendant elements, including nested components. It handles these tags and attributes:
a[href]img[src, srcset]video[src, poster]source[src, srcset]link[href]script[src]object[data]embed[src]iframe[src]v:image[src]v:fill[src]
Absolute URLs are left unchanged when using base — only relative URLs are rewritten. When using parameters, query strings are appended to all URLs regardless.
Slash normalization is handled automatically, so base="https://example.com/" and base="https://example.com" both work correctly.
Values in srcset attributes are also processed, each URL in the set is rewritten individually.
The url.base and url.parameters config options do the same thing at the transformer level for the entire template. Use WithUrl when you need different base URLs or parameters for specific sections of your email.
Props
base
Type: String
Default: undefined
Base URL to prepend to all relative URLs found in child elements. Absolute URLs are not affected.
<template>
<WithUrl base="https://cdn.example.com/images">
<Img src="hero.jpg" alt="Hero" width="600" />
</WithUrl>
</template>
parameters
Type: String
Default: undefined
Query parameters to append to all URLs in child elements. Provide as a query string without the leading ?.
<template>
<WithUrl parameters="utm_source=email&utm_medium=newsletter">
<Button href="https://example.com">Click here</Button>
</WithUrl>
</template>