Vuejs 无法加载 svg 图像？

Posted 2023-02-23

【中文标题】Vuejs 无法加载 svg 图像？

【英文标题】：Vuejs fails to load svg image?

【发布时间】：2016-05-02 22:41:48

【问题描述】：

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

感谢您的帮助。

【问题讨论】：

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

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

您可以尝试使用svg-loader 而不是file-loader。

我满怀希望地尝试了 svg-loader。编译工作，但是在加载页面时，我有这个新错误：Unexpected token < You may need an appropriate loader to handle this file type.

在我看来，svg-loader适用于webpack，但是当vuejs尝试编译src="..."时，它没有考虑svg-loader的规则，然后就失败了。但我的知识只到这里。

【参考方案1】：

这个对我有用：

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

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

我将它与其他字体加载器一起用于引导程序或其他字形字体：

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'

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

【讨论】：

对我有用的太棒了。现在我必须明白为什么它将我的文件放在 dist/dist/ 而不是 dist/ ...