Vue.js如何导入SVG标志

Question

我是vue.js的新手，并且习惯了React。我目前正在尝试将 SVG 徽标导入到我的标头组件中，但我不确定如何导入。在反应中，我只需在当前组件中需要的地方执行import Logo from './path;和使用它。Logo这基本上就是我现在正在尝试做的事情，但我不断收到错误。谁能告诉我如何做到这一点Vue.js？

<template>
    <header class="nav">
        <img src={Logo} alt="24G Logo">
    </header>
</template>

<script>
    import Logo from '../assets/76_logo.svg';

    export default {
        name: 'Header'
    }
</script>

<style lang="scss" scoped>

</style>

Answer 1

这里有三个选项。我认为最好的是第三种：

1. 只需像在任何网页中一样输入 src ，<img src='../path/to/file.svg' ...尽管这有一些缺点（无论:src='logoPath'logoPath 是否是包含相同内容的变量）。有关简短概述，请参阅此堆栈答案，有关更多详细信息，请参阅 css 技巧中的这篇文章。

2. 查看svg-vue-loader。如果没有加载器，Vue 不会自动导入 svg。

3. 粘贴进去就可以了！（打开 svg 文件并将其复制粘贴到模板中。）我认为这是最好的选择，特别是在原型设计或较小的项目时。就像这样：

<template>
  <header class="nav">
    <svg ....
  </header>
</template>

如果这会让以后变得太拥挤，只需创建一个新组件，将其命名为 Logo，然后将 svg 粘贴到其中，然后将 MainLogo 组件导入到标头中。

不需要 svg-loader。尽管加载程序是一个开发依赖项，所以无论如何也不会让你付出代价；他们只会做你可以手动做的同样的事情。

// in MainLogo.vue

<template>
  <svg ....
</template>

// in MainHeader.vue

<template>
  <header class="nav">
    <MainLogo>
  </header>
</template>

<script>
  import MainLogo from '../path/to/file.vue'
  export default {
    components: { MainLogo }
  }
</script>

干杯