Vue.js如何导入SVG标志

Question

我对vue.js还很陌生，之前使用的是React。我现在正在尝试将一个SVG标志导入到我的头部组件中，但我不确定应该如何操作。在React中，我会简单地执行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>

- albert_anthony6

---

你能试试这个答案吗？https://dev59.com/vlcO5IYBdhLWcg3w3VPU#45116994 - Göksel ÖZER

谢谢，我相信我能做到。 - albert_anthony6

Answer 1

以下是三个选项。在我看来，最好的选择是第三个:

1. 像在任何网页中一样输入 src <img src='../path/to/file.svg' ... 虽然这种方法有一些缺点（无论是 :src='logoPath' 还是变量包含相同的值）。请参见此堆栈答案中的简短概述，以及来自css tricks的更多详细信息的文章。

2. 查看svg-vue-loader。Vue 不会自动导入 svg 文件而不使用加载程序。

3. 只需将其粘贴到模板中！（打开 svg 文件并将其复制粘贴到模板中。）在我的意见中，这是最好的选择，特别是在原型设计或较小项目中。如下所示：

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

如果以后这会使它太拥挤，只需创建一个新组件，称之为Logo，然后将svg粘贴到其中，然后导入MainLogo组件到您的标题中即可。

无需使用svg加载器。虽然加载器是开发依赖项，所以不会花费你任何东西；它们只会执行您可以手动执行的相同操作。

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

干杯

- n-smits

---

我发现这种方式可以消除错误并显示svg：<header class="nav"> <img src='../assets/76_logo.svg' class="nav__logo" alt="24G Logo"> </header> - albert_anthony6

基本上不导入任何东西，只在src属性中指定路径。这种简单的方式有什么缺点吗？ - albert_anthony6

这是一个更大的概述：https://css-tricks.com/using-svg/，简而言之（虽然不确定是否提到了所有内容）https://dev59.com/rGAg5IYBdhLWcg3wwtRp - n-smits

谢谢，这是为了一份面试的作业项目而准备的，请帮忙提供指导。我对Vue.js还比较新手。 - albert_anthony6

祝你好运 :) - n-smits

Answer 2

在搜索了很久并发现所有答案都已过时后，我尝试了新的v-html属性。

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

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

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

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

希望这能帮助某些人！
我将其与avataaar的随机头像生成器一起使用，并将生成的svg存储到数据库（mongo）中

- Alan Spurlock

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。

- Surya

Answer 4

编辑你的代码

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

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

- kian wigin

---

你的回答可以通过提供更多支持信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人可以确认你的答案是正确的。您可以在帮助中心中找到有关如何编写良好答案的更多信息。 - Community