首页 文章

Vuejs无法加载svg图像？

提问于
浏览 次
4

在我的一个组件中，我正在尝试加载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" },

谢谢您的帮助 .

javascript webpack vue.js

1 回答

  • 6

    这个对我有用：

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

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

    回复于

相关问题