SVG not loading when using resolved path

[PierBover]

When using a relative path SVGs load fine:

<img src="../../../assets/logo.svg">

It works and in the DOM I get:

<img src="data:image/svg+xml....">

But this is a pain if you start nesting folders of components so I tried creating an alias:

'assets': path.resolve(__dirname, '../src/assets')

to be able to do:

<img src="assets/logo.svg">

But when doing this the SVG data is not required properly and instead of getting src="data:image/svg+xml...." in the DOM I get exactly src="assets/logo.svg".

Is this a problem with the webpack configuration of the template or am I doing something wrong?

[PierBover]

Here is another shenanigan with SVGs.

When using <img src="../../../assets/icon.svg"> the icon renders fine as a data URL.

But when passing the path as a prop <img :src="iconPath"> I get exactly this in the DOM <img src="../../../assets/logo.svg"> which obviously renders a broken image.

[PierBover]

Ok I figured it out thanks to this discussion:

#126

I still can't resolve paths directly in the <img> tag though. I don't know if declaring relative paths is worse than declaring computed properties per icon. Probably the best solution is to create a plugin to automate that.