src binding not finding svg file

Hello there, I’m not sure if this is an issue with the loader or merely a lack of my understanding. It appears that when I attempt to dynamically load an SVG using the v-bind:src approach on the image tag, the loader cannot find it.

Loading SVG from src path

<img svg-inline :src="`../../static/images/icon-${game.name}.svg`" />

If I write it in normally src="../../static/images/icon-basketball.svg" it works.

Loading SVG from build path I’ve also tried this:

<img svg-inline :src="`/images/icon-${game.name}.svg`" />

But it ends up just loading up an image tag with the SVG as it’s src instead of inlining the SVG.

Any ideas?

[oliverfindl]

Hello,

I will try to explain it one more time as simple as possible.

This Webpack loader only parses static files. That means, it takes all your *.vue files and tries to locate all *.svg sources in image tags in those files. It doesn’t perform any Vue specific logic, because that happens later in browser (or in SSR process).

As for using @ alias, that’s Webpack stuff. It has nothing to do with Vue.

If you have any more questions, feel free to ask.

Thanks

[oliverfindl]

Hello,

while it is true, that majority of use cases are based on displaying svg image is based on dynamic rules, Webpack runs before any Vue logic is able to execute (excluding SSR, which is minority of use cases). Therefore there is no simple way to know, which svg files should Webpack include into bundle. You can read my last message in this issue for more details and possible solutions.

I’m currently working on Vue plugin, which will target this issue, of course with cost of performance.

For your concerns about usefulness of this loader, currently you have more approaches you can use to inline your svg files:

• using Webpack require function together with v-html directive, which will increase your build time and bundle size (demo here, read readme first).
• using different Webpack loader (e.g.: vue-svg-loader), which require to manually import svg files and register them as components before you can use them. This can get pretty messy, if you are using lot of svgs.
• using Vue plugin (e.g.: vue-simple-svg). I don’t have any experience with it. I’m working on something similar (based on this loader), but more advanced with more features.
• manually copying svgs into your code, which is very hard to maintain, when you are making changes to svg, that is copied into multiple components.

At time I was writing this plugin, I had to solve situation, where I had to show one of 3 possible svg images about 100+ times (was user configurable). So at that time, it was pretty straightforward to me to do v-if, v-else-if and v-else together with inline sprites. Time showed me, that people want use this loader different way I designed it. Therefore I’m working on Vue plugin version of this loader as I stated above.

If you have any more questions, feel free to ask.

Thanks