问Vue SVG加载程序加载不准确

EN

我在使用svg加载程序时遇到了问题。我试图加载文件，但是它在控制台中给了我这个错误。

运行时-dom.esm-bundler.js?830f:21 Uncaught :未能在“文档”上执行“createElement”：提供的标记名('/assets/twitter-brands.6620c8ae.svg')不是有效名称。(webpack-internal:///./node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:290:19) at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3910:29) at processElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3898:13) at patch (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3818:21) at mountChildren (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:4008:13) at mountElement (webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3917:17) at processElement (webpack-内部):///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3898:13) at修补程序(webpack-internal:///./node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js:3818:21) at ReactiveEffect.componentUpdateFn as fn at ReactiveEffect.run (webpack-internal:///./node_modules/@vue/reactivity/dist/reactivity.esm-bundler.js:195:29) createElement @运行时830f:21 mountElement @ mountChildren -core.esm-bundler.js?5c40:3771 processElement @运行时-core.esm-bundler.js?5c40:3750修补程序@运行时-core.esm-bundler.js?5c40:3670 mountChildren@core.esm-bundler.js?5c40:3869 mountElement @-core.esm-bundler.js?5c40: processElement @processElement@processElement-core.esm-bundler.js?5c40:3750修补程序@mountChildren-core.esm-dbunler.js? componentUpdateFn @componentUpdateFn@c70@c70@processElement@运行时-core.esm-bundler.js？core.esm-bundler.js?5c40:4218 run @ reactivity.esm-bundler.js?a1e9:160 setupRenderEffect @运行时-core.esm-bundler.js?5c40:4337 mountComponent @mountComponent-core.esm-bundler.js?5c40:4120 processComponent @运行时-core.esm-bundler.js?5c40:4078修补程序-core.esm-bundler.js?5c40:3673 mountChildren @mountChildren-core.esm-bundler.js?5c 40: processFragment @processFragment@运行时-core.esm-bdler.js 540？esm-bundler.js?5c40:3666 componentUpdateFn @Run-core.esm-bundler.js?5c40:4218 run @ reactivity.esm-bundler.js?a1e9:160 setupRenderEffect @运行时-core.esm-bundler.js?5c40:4337 mountComponent @core.esm-bundler.js?5c40:4120 processComponent @运行时-core.esm-bundler.js?5c40:4078补丁-core.esm-bundl.jers?5c40:3673@mountComponent@core.esm-bundler.js?c40:4120 processComponent@运行时-core.esm-bundler.js?5c40:4078补丁@运行时-core.esm-bundler.js?5c40:3673@mountComponent@core.esm-bundler.js？webpack_require @ bundler.js?5c40:3157 app.mount @ app.js:849 fn @ app.js:151 1@ app.js:1350 app.js:849 checkDeferredModules @ app.js:46 (匿名)@ app.js:925 (匿名)@app.js:925(匿名)@ app.js:928 @app.js:928显示5多帧

这是代码的截图。服务是正确地编译它，而不产生任何错误。路径是绝对正确的。

​

​

这是密码。

<template>
  <header>
    <nav class="container">
      <div class="branding">
        <router-link class="header" :to="{ name: 'Home' }"
          >Fireblogs</router-link
        >
      </div>
      <div class="nav-link">
        <ul>
          <router-link class="link" to="#">Home</router-link>
          <router-link class="link" to="#">Blogs</router-link>
          <router-link class="link" to="#">Create Post</router-link>
          <router-link class="link" to="#">Login/Register</router-link>
        </ul>
      </div>
    </nav>
    <!-- Menu Icon -->
    <menuIcon />
  </header>
</template>

<script>
import menuIcon from "../assets/Icons/twitter-brands.svg";
export default {
  name: "Navigation",
  components: {
    menuIcon,
  },
};
</script>

这是package.json代码

{
  "name": "vue-with-firebase",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "firebase": "^9.1.3",
    "vue": "^3.0.0",
    "vue-firebase": "^1.0.8",
    "vue-router": "^4.0.0-0",
    "vue2-editor": "^2.10.3",
    "vuefire": "^2.2.5",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.2",
    "vue-svg-loader": "^0.16.0",
    "vue-template-compiler": "^2.6.14"
  }
}