我是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>
这里有三个选项。我认为最好的是第三个：
像在任何网页中一样简单地输入 src ，<img src='../path/to/file.svg' ...尽管这会带来一些缺点（无论:src='logoPath'logoPath 是否包含相同的变量。有关简短概述，请参阅此堆栈答案，有关更多详细信息，请参阅 css 技巧中的这篇文章。
查看svg-vue-loader。Vue 不会在没有加载器的情况下自动导入 svg。
粘贴进去就好了！（打开 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>
干杯
在搜索和搜索之后，看到所有答案都是旧的，我继续尝试使用新的 v-html props。
结果，成功！
<div v-html="avatar" style="width: 100%"></div>
头像是我存储在数据库中的完整元素。没有加载器，没有导入，只使用 Vue.js 的内置资源
如果您省略样式，则 svg 将不会显示。
此外，加载完整元素使我能够将 ref 属性附加到元素。使我能够通过脚本访问 svg。
希望对某人有所帮助！！
我将它与 avataaar 的随机头像生成器一起使用，并将生成的 svg 存储到数据库 (mongo)
这是我使用的另一种方法：
<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。
编辑你的代码
<script>
import Logo from '../assets/76_logo.svg';
export default {
name: 'Header',
data(){
Logo: Logo
}
}