src binding not finding svg file

[DavidVII]

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,

Its not working like that. This Webpack loader only parses static files. It does not execute any Vue logic at this point. That happens later, when these files are served from server and parsed in client (browser). So in this loader its not possible to use Vue bindings, because binded variables in template would not get replaced prior to Vue execution in client (browser).

Its probably good idea to mention it in readme file.

You are probably looking for some kind of vue-plugin (that will dynamically inject SVGs to DOM based on your current data) and not webpack-loader.

If you have any questions, feel free to ask.

[DavidVII]

Thanks, @oliverfindl. I appreciate your response, and it all makes sense. I think it would be convenient to be able to use Vue bindings, but understand why it's not.

[oliverfindl]

Readme file updated.

Closing this issue.

[newbie78]

I have a similar problem.
I solved it as follows:
in template

        <div
          v-for="(prj, index) in projects"
          :key="index"
        >
          <div class="align-center" v-html="prj.svg"></div>

in js

export default {
  data() {
    return {
      projects: [
        {
          svg: '<img svg-inline src="@/assets/i/icon005.svg" alt="">',
        },
        {
          svg: '<img svg-inline src="@/assets/i/icon005.svg" alt="">',
        },
        {
...

and all working fine =)

[oliverfindl]

Hello,

yes this will work fine, but you have to define all img tags in your source code. Eg.: It won't work, for resources fetched with ajax.

Thanks

[s0meRandomDev]

this does not work at all, the svg-inline directive is just ignored, so the SVG file does load, but it's not inlined.

[oliverfindl]

Hello,

Could you describe in more detail what exactly is not working? Even better if you could provide some dummy repo which has this issue replicable.

Thanks

[s0meRandomDev]

Hello, i'm sorry I should have been more explicit. I think everything is working as intended, it's newbie78's workaround that is not working.

[oliverfindl]

Hello,

I just tested this workaround and its still working for me.

Template:

<template>
	<div class="root-wrapper">
		<div v-html="image" class="logo-wrapper" />
	</div>
</template>

Script:

export default {
	name: "App",
	data: () => ({
		image: `<img svg-inline svg-sprite src="@/assets/logo.svg" class="logo" />`
	})
};

Please can you try this example and give feedback if it works for you?

Thanks

[s0meRandomDev]

My bad, this does work. I was trying to declare all my path in a for loop, but this only works if the declaration is static. So, this will work:

<template>
	<div class="root-wrapper">
		<div v-html="getImage()" class="logo-wrapper" />
	</div>
</template>

export default {
	name: "App",
	methods: {
		getImage() {
                    return '<img svg-inline svg-sprite src="@/assets/logo.svg" class="logo" />'
                }
	})
};

but this will not:

<template>
	<div class="root-wrapper">
		<div v-html="getImage('someItem')" class="logo-wrapper" />
	</div>
</template>

export default {
	name: "App",
	methods: {
		getImage(item) {
                    return '<img svg-inline svg-sprite src="@/assets/' + item + '.svg" class="logo" />'
                }
	})
};

In this second example, the SVG will be displayed but will not be inline.

[oliverfindl]

Hello,

sure it wont work like that. This Webpack loader only parses static Vue SFC files (something.vue) one by one and replaces any SVG references found in src attribute of img tags with its actual contents if found on filesystem. In your example it wont replace because file .../assets/${item}.svg does not exists. Loader wont execute any Vue logic, that happens later in browser (or SSR).

Hope this brings some light into this issue.

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

Thanks

[s0meRandomDev]

Yes, I understood that from your first answer to this post, I'm just a little slow ;) thank you for the additional explanation anyway !

[AlexanderBelkevich]

This working if data create in component? But vuex also not working?

[oliverfindl]

Hello,

If you mean using variables via Vuex mapGetters method, this is still Vue variable and applies exactly what is written above.

If you mean workaround using img tags directly in Vue data (or in this case in Vuex store state), this won't work because as mentioned above in my last answer, this loader parses only static Vue SFC files (*.vue), but not javascript files (*.js). I'm not aware of simple way to distinguish Vuex store file and/or Vuex store module files from other javascript files. Even if I can, there will be no way for using inline SVG sprites with this approach.

As mentioned in my first answer, you guys are probably looking for some kind of vue-plugin (that will dynamically fetch and inject SVGs to DOM based on your current data) and not webpack-loader.

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

Thanks.