Transform html asset relative path. It works with vite, snowpack & webpack 5.
e.g.
before:
<img src="foo.png">
after:
<img src="{new URL('foo.png', import.meta.url).href}">
svelte.config.js:
const preprocessHtmlAsset = require('svelte-preprocess-html-asset');
module.exports = {
preprocess: [
preprocessHtmlAsset()
]
};
preprocessHtmlAsset({ rules, filter })
Array
. Add custom rules. Build-in rules:
const defaultRules = [
{
tag: 'img',
attribute: 'src',
type: 'src'
},
{
tag: 'img',
attribute: 'srcset',
type: 'srcset'
},
{
tag: 'input',
attribute: 'src',
type: 'src'
},
{
tag: 'audio',
attribute: 'src',
type: 'src'
},
{
tag: 'video',
attribute: 'src',
type: 'src'
},
{
tag: 'video',
attribute: 'poster',
type: 'src'
},
{
tag: 'source',
attribute: 'src',
type: 'src'
},
{
tag: 'source',
attribute: 'srcset',
type: 'srcset'
},
{
tag: 'track',
attribute: 'src',
type: 'src'
},
{
tag: 'link',
attribute: 'href',
type: 'src'
},
{
tag: 'object',
attribute: 'data',
type: 'src'
},
{
tag: 'embed',
attribute: 'src',
type: 'src'
}
];
filter(path) -> Boolean
Filter the path. Return true
to transform, or return false
to skip the path.
Use https://github.com/canadaduane/snowpack-plugin-relative-css-urls