SVG 不使用 @nuxtjs/svg 渲染

Question

对the module's docs中的字母使用“vue-svg-loader”方法，我得到这个错误：

[Vue 警告]：无效的组件定义： 数据：图像/svg+xml；base64,PHN2ZyB3aWR0...

我的代码与示例相同。

知道为什么会出现这样的错误吗？

（请注意，之前我尝试使用来自this answer 的代码并且没有收到错误，但是在页面上呈现了字符串“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>

Answer 1

查看您的 nuxt.config.js 配置文件并添加对模块 @nuxtjs/svg 的引用 （如the module's doc 中的安装部分所述）

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