javascript - Vuejs fails to load svg image? - Stack Overflow

admin管理员组

文章数量:1328030

In one of my ponent, 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/ponents/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.

In one of my ponent, 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/ponents/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.

• javascript
• webpack
• vue.js

Share Improve this question Follow asked Jan 26, 2016 at 11:20 Cyril N.Cyril N. 39.9k4040 gold badges162162 silver badges266266 bronze badges 6

• Can you open the file in the browser? I'd say it's a Webpack problem rather than VueJS. – 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. Commented Jan 26, 2016 at 12:14
• You could try using svg-loader instead of file-loader. – Andrius Commented Jan 26, 2016 at 12:35
• I tried svg-loader with hopes. The pilation 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. Commented Jan 26, 2016 at 13:02
• In my opinion, svg-loader works for webpack, but when vuejs tries to pile src="...", it doesn't take into consideration the svg-loader rule and then fails. But my knowledge only go up to here. – Cyril N. Commented Jan 26, 2016 at 13:03

 |  Show 1 more ment

1 Answer 1

Sorted by: Reset to default 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.

本文标签： javascriptVuejs fails to load svg imageStack Overflow