Vuejs无法加载svg图像？

在我的组件之一，我试图加载一个SVG图像，但vuejs/webpack失败。Vuejs无法加载svg图像？

这里是我的代码：

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

<script> 
export default {} 
</script>

和错误：

在./src/assets/public/images/sad.svg ERROR
模块解析失败： /家/ 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的内容。这不是我想要的。

这里是我的WebPack配置为SVG：

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

谢谢您的帮助。

来源

2016-01-26 Cyril N.

你可以在浏览器中打开文件吗？我会说这是一个Webpack问题，而不是VueJS。 – Andrius

是的，该文件可以加载。而且它也是正确的路径，因为错误消息包含文件的开头。 –

你可以尝试使用'svg-loader'而不是'file-loader'。 – Andrius

这一次为我的作品：

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

它的正则表达式来处理任何文件与SVG扩展为静态资源你正在寻找的方式。

我与其他字体装载机引导或其他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'}

使用正则表达式，你可以改变可能对文件和你一样使用它内嵌的装载机。

来源

2016-01-26 14:36:53 TiagoLr

真棒，为我工作。现在我必须理解为什么它将我的文件放在dist/dist /里，而不是dist/... –

Vuejs无法加载svg图像？

回答

相关问题