Load image resource in SVG image xlink:href failed
xchunzhao opened this issue · comments
ZhaoXC commented
{
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>
Alexander Akait commented
@xchunzhao please create minimum reproducible test repo
ZhaoXC commented
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']
}
}
}