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行：   意外的令牌＆lt;你可能需要一个   适当的加载程序来处理这种文件类型   |
  |
  |   @   ./~/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或其他字形：

{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'}

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

Vuejs无法加载svg图像？

1 个答案: