Vue-loader: Loading an image source within SVG <image> xlink:href fails

[TheLarkInn]

(Hi all working on vue-loader, we came across this issue in our core repo from @sdras, moving it here:)

First off, thanks so much for your hard work on webpack, I use it every day! 🙌

After speaking to @TheLarkInn, I do believe that this is a bug, though likely low use-case. (until people figure out how awesome this implementation is 😎)

Currently if I load an image with a relative src within a .vue file, it works, but images embedded within an SVG DOM are not recognized. This is probably due to the XML markup for image, where you would create an tag and then within it use an xlink:href="" attribute instead of src="" to load the relative path. When I use an absolute path, I observe the correct behavior, and the image loads.

Benefits of using the SVG to load an image include but are not limited to:

image positioning: for dynamic content, an SVG image can be placed exactly without absolute positioning because you're using the SVG coordinate system
responsive, as this positioning will be stable along with other images within the same coordinate system
I'm on a MacBook Pro, node version v6.7.0.

Thank you very much for your attention in the matter!

[sdras]

thank you @TheLarkInn!

[TheLarkInn]

@yyx990803 let me know if we can help with this I haven't spent enough time looking in vue-loader as of late. No prob @sdras :)

[yyx990803]

You should be able to use vue-loader's transformToRequire option to make that work:

// pass this to vue-loader
// see http://vue-loader.vuejs.org/en/options.html
{
  transformToRequire: {
    image: 'xlink:href'
  }
}

We may consider adding this to default config.

[sndrgb]

Guys for me transformToRequire is ok for normal binding but if i want to use v-bind:src with me it doesn't function, normal?

[LinusBorg]

Yes, normal. I you use b-bind, the attribute's value is a Javascript expression, not a source path. vue-loader can't somehow guess the path from that.

You have to require the image yourself in the Javascript code of your component.

[Yearhouse]

Im trying this but i cant get the svg paths to change:

{ test: /\.vue$/, loader: 'vue-loader', html: { root: path.resolve(__dirname, '/static/production/assets') }, options: { transformToRequire: { image: 'xlink:href' } }

im my Vue template file
<svg class="icon"><use xlink:href="assets/img/icons.svg#icon-eye"></use></svg>

But when being rendered the path isnt touched??
What am I doing wrong

[kazupon]

If file-loader url-loader don't support for use of svg, As far as I have examined, There is webpack loader that called svg-splite-loader for svg.
Maybe, you can resolve with it!

[sdras]

🤘🏼 thank you @yyx990803 and @kazupon

[TheLarkInn]

🔥🔥

[hmoffatt]

Is there any way to do this with Vue 1.x ? I have

[YourFavouriteOreo]

I think this bug is back. Currently trying to dynamically load svg icons and the result of the function works when not dynamically loaded.

class_text is a prop.

<image x="21%" y="14%" height="100px" width="100px" :href="getClassIcon()"/>

    getClassIcon: function (){
        return '../assets/class_symbols/'+this.class_text+'.svg';
    }

[idmick]

I think this bug is back. Currently trying to dynamically load svg icons and the result of the function works when not dynamically loaded.

class_text is a prop.

<image x="21%" y="14%" height="100px" width="100px" :href="getClassIcon()"/>

    getClassIcon: function (){
        return '../assets/class_symbols/'+this.class_text+'.svg';
    }

I'm experiencing the same issue.

this works:
<image href="require('@/assets/image/some-icon.svg')" / >

this doesn't:
<image :href="require(``@/assets/image/some-${icon}.svg``)" />
The second will load the image, but if the icon prop is changed, this still shows the other icon. Although when I inspect the SVG it shows the correct URL.