Vuejs无法加载svg图像？

Question

在我的一个组件中,我正在尝试加载svg映像,但vuejs/webpack失败.

这是我的代码:

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

<script>
export default {}
</script>

而错误:

./src/assets/public/images/sad.svg中的错误
模块解析失败:/home/cabox/workspace/src/assets/public/images/sad.svg第1行:意外的令牌<您可能需要一个适当的加载器来处理此文件类型.
|
|
| @ ./~/vue-html-loader!./~/vue-loader/lib/selector.js?type=template&index=0!./src/components/tooltip.vue 1:205-258 1:592-645

据我所知,Vuejs(或Webpack)试图解释.svg的内容.这不是我想要的.

这是svg的webpack配置:

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

谢谢您的帮助.

Answer 1

这个对我有用:

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

它是一个正则表达式,可以按照您要查找的方式处理具有svg扩展名的任何文件作为静态资源.

我将它与其他字体加载器一起用于bootstrap或其他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'}

使用该正则表达式,您可以将加载器更改为文件并将其内联,就像您使用的那样.