Javascript Vuejs无法加载svg图像？

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

这是我的密码：

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

<script>
export default {}
</script>

谢谢您的帮助。

这一款适合我：

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

---

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

您能在浏览器中打开文件吗？我认为这是一个网页问题，而不是VueJS。是的，文件可以加载。它也是正确的路径，因为错误消息包含文件的开头。您可以尝试使用

svg loader

而不是

file loader

。我满怀希望地尝试了svg loader。编译工作正常，但在加载页面时，我出现了一个新错误：

意外标记<您可能需要一个合适的加载程序来处理此文件类型。

在我看来，svg加载程序适用于webpack，但当vuejs尝试编译src=“…”，它没有考虑svg加载程序规则，然后失败。但我的知识只限于此。这对我来说太棒了。现在我必须理解为什么它将我的文件放在dist/dist/而不是dist/。。。

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