Vuejs fails to load svg image?

Question

In one of my component, I'm trying to load an svg image but vuejs/webpack fails.

Here's my code :

<template>
    <img src="../../assets/public/images/sad.svg" />
</template>

<script>
export default {}
</script>

And the error :

ERROR in ./src/assets/public/images/sad.svg
Module parse failed: /home/cabox/workspace/src/assets/public/images/sad.svg Line 1: Unexpected token < You may need an appropriate loader to handle this file type.
|
|
| @ ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/tooltip.vue 1:205-258 1:592-645

From what I understand, Vuejs (or Webpack) tries to interpret the content of .svg. And this is not what I want.

Here's my webpack config for svg :

{ test: "\.svg", loader: "file-loader?mimetype=image/svg+xml" },

Thank you for your help.

Can you open the file in the browser? I'd say it's a Webpack problem rather than VueJS. — Andrius
– Andrius, Commented Jan 26, 2016 at 11:37
Yes, the file can be loaded. And it's also it's correct path since the error message contain the beginning of the file. — Cyril N.
– Cyril N., Commented Jan 26, 2016 at 12:14
I tried svg-loader with hopes. The compilation works, but then when loading the page, I have this new error : Unexpected token < You may need an appropriate loader to handle this file type. — Cyril N.
– Cyril N., Commented Jan 26, 2016 at 13:02
In my opinion, svg-loader works for webpack, but when vuejs tries to compile src="...", it doesn't take into consideration the svg-loader rule and then fails. But my knowledge only go up to here. — Cyril N.
– Cyril N., Commented Jan 26, 2016 at 13:03

TiagoLr · Accepted Answer · 2016-01-26 14:48:48Z

6

This one works for me:

{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

Its a regular expression to process any file with an svg extension as a static resource the way you are looking for.

I use it with other font loaders for bootstrap or other glyphfonts:

{test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/font-woff'},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'}

Using that regular expression you can probably change the loader to file and inline it like you were using.

edited Jan 26, 2016 at 14:48

answered Jan 26, 2016 at 14:36

TiagoLr

3,10426 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Cyril N. Over a year ago

Awesome that worked for me. Now I have to understand why it places my files in dist/dist/ instead of dist/ ...

Collectives™ on Stack Overflow

Vuejs fails to load svg image?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related