SVG 不使用 @nuxtjs/svg 进行渲染

Question

使用“vue-svg-loader”方法来处理模块文档中的字母，我收到此错误：

[Vue 警告]：无效的组件定义：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>

Answer 1

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

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