javascript - Vuejs 无法加载 svg 图片？

Question

在我的一个组件中，我试图加载 svg 图像，但 vuejs/webpack 失败。

这是我的代码:

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

<script>
export default {}
</script>

错误:

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

据我了解，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'}

使用该正则表达式，您可能可以将加载程序更改为文件并像您使用的那样内联它。