SVG不使用@nuxtjs/svg渲染

Question

使用模块文档中的"vue-svg-loader"方法，我遇到了以下错误：

[Vue warn]: 无效的组件定义：data:image/svg+xml;base64,PHN2ZyB3aWR0...

我的代码与示例完全相同。你有什么想法为什么会出现这样的错误吗？（请注意，之前我尝试使用此答案中的代码，并没有出现错误，但是页面上呈现的是一个字符串"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhl..."而不是实际的SVG图像）编辑：下面是我的模板代码，在/components/global/SvgIcon.vue中。

<template>
  <ArrowRight />
</template>

<script>
import ArrowRight from '~/assets/img/arrow-right.svg?inline'

export default {
  components: {
    ArrowRight
  }
}
</script>

我的SVG图标在/assets/img/中。

SVG文件内容：

<svg width="13" height="20" viewBox="0 0 13 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.3604 9.93625C12.3604 10.2924 12.2231 10.6485 11.9492 10.9201L3.32384 19.4648C2.77517 20.0083 1.88558 20.0083 1.33712 19.4648C0.788667 18.9214 0.788667 18.0403 1.33712 17.4967L8.96929 9.93625L1.33739 2.37573C0.788933 1.83218 0.788933 0.951159 1.33739 0.407866C1.88585 -0.135954 2.77543 -0.135954 3.32411 0.407865L11.9494 8.95245C12.2234 9.22412 12.3604 9.58023 12.3604 9.93625Z" fill="white"/>
</svg>

- drake035

Answer 1

请查看您的 nuxt.config.js 配置文件，并添加对模块 @nuxtjs/svg 的引用（如模块文档中的安装部分所述）。

我已经在一个最小项目（nuxt hello world示例+@nuxtjs/svg）上进行了测试。 最初它可以正常工作并正确渲染图像。 删除模块引用后，我得到了与您描述的相同的错误消息。

- mcernak

---

谢谢，你说得对，我忘记了！但现在我看到的不是SVG图像，而是它的文件名呈现在DOM中：/_nuxt/fce91b3f7439fe8fc414930e5cd5b231.svg。你有什么想法？ - drake035

我无法重现您所描述的行为，因此我已在GitHub上发布了最小示例（链接已添加到答案）。请查看是否有帮助，否则请添加一个最小可重现示例。 - mcernak

不知道我做了什么，但现在它可以工作了。非常感谢 :) - drake035