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 是包含相同内容的变量。对于 a short overview see this stack answer 和 more details see this article from css tricks。

2. 查看svg-vue-loader。 Vue 不会在没有加载器的情况下自动导入 svg。

3. 只需粘贴即可！ （打开 svg 文件并将其复制粘贴到模板中。）我认为最好的选择，尤其是在原型设计或小型项目时。像这样：

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

如果以后太拥挤，只需创建一个新组件，将其命名为 Logo，然后将 svg 粘贴到那里，然后将 MainLogo 组件导入到您的标题中。

不需要 svg-loaders。尽管加载器是开发依赖项，但无论如何都不会花费您；他们只会做你可以手动做的同样的事情。

// 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>

干杯

Answer 2

在搜索和搜索之后，看到所有答案都是旧的，我继续尝试新的 v-html 属性。

结果，成功！ <div v-html="avatar" style="width: 100%"></div>

头像是我存储在数据库中的完整元素。 没有加载器，没有导入，只使用 Vue.js 的内置资源

如果省略样式，则 svg 将不会显示。

此外，加载完整元素使我能够将 ref prop 附加到元素。使我能够通过脚本访问 svg。

希望对某人有所帮助！
我将它与 avataaar 的随机头像生成器一起使用，并将生成的 svg 存储到数据库 (mongo)

Answer 3

这是我使用的另一种方法：

<template>
  <a href="#"
    class="log-link-css-class">
    <!-- SVG Icon Start-->
    <img alt="alt message" class="your-logo-css-class"
          src="@/assets/images/logofilename.svg">
    <!-- <SVG Icon End /> -->
  </a>
</template>

无需导入。 Vue 会自动将其转换为唯一的 URL。

Answer 4

编辑你的代码

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

export default {
    name: 'Header',
    data(){
      Logo: Logo
    }
}