admin管理员组文章数量:1320670
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.
Share Improve this question asked Jan 26, 2016 at 11:20 Cyril N.Cyril N. 39.9k40 gold badges162 silver badges266 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 offile-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
1 Answer
Reset to default 6This 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
版权声明:本文标题:javascript - Vuejs fails to load svg image? - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742062024a2418632.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论