webpack-contrib / url-loader

A loader for webpack which transforms files into base64 URIs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Load image resource in SVG image xlink:href failed

xchunzhao opened this issue · comments

{
    test: /\.(png|jpg|gif|svg)$/,
    use: [{
        loader: "url-loader",
	options: {
	    limit: 5 * 1024, 
	    outputPath: "images"
	}
    }]
}

The above is my url-loader config. Every image url is resolved successfully except the image resource xlink:href in SVG, before build like this:

<svg>
    <pattern id="team-b" x="0" y="0" viewBox="0 0 120 120" height="100%" width="100%">
        <image x="0" y="0" width="120px" height="120px" xlink:href="../../assets/images/a.png"></image>
    </pattern>
</svg>

Expect After build

<svg>
    <pattern id="team-b" x="0" y="0" viewBox="0 0 120 120" height="100%" width="100%">
        <image x="0" y="0" width="120px" height="120px" xlink:href="${base64(url)}"> 
        </image>
    </pattern>
<svg>

@xchunzhao please create minimum reproducible test repo

My fault. I mistake the use of url-loader and html-loader. Just add html-loader options can solve it:

{
    test: /\.html$/,
    use: {
	loader: 'html-loader',
	options: {
	    attrs: ['img:src','link:href','image:xlink:href']
	}
    }
}