Vue.js如何导入SVG徽标 [英] Vue.js how to import SVG logo

问题描述

我是 vue.js 的新手，习惯于反应.我目前正在尝试将SVG徽标导入到我的标头组件中，但不确定如何.作为响应，我只需要执行import Logo from './path;并在当前组件中需要的任何地方使用Logo即可.这基本上是我现在正在尝试做的事情，但是我一直在出错.谁能告诉我该如何在Vue.js中完成?

I'm new to vue.js and am used to React. I'm currently trying to import an SVG logo into my header component but I'm not sure how. In react, I would simply do import Logo from './path; and use Logo wherever I needed it within the current component. This is basically what I'm attempting to do right now but I keep getting errors. Could anyone tell me how this could be done in 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>

推荐答案

这是三个选项.我认为最好的是第三个:

Here are three options. The best in my opinion is the third:

1. 像在任何网页<img src='../path/to/file.svg' ...中一样简单地输入src，尽管有一些缺点(无论是:src='logoPath'，其中logoPath是包含该变量的变量.对于

1. Simply input src like in any webpage <img src='../path/to/file.svg' ... though that come with some drawbacks (regardless if it's :src='logoPath' where logoPath is variable containing the same. For a short overview see this stack answer, and for more details see this article from css tricks.

查看 svg-vue-loader .没有加载程序，Vue不会自动导入svg.

Check out svg-vue-loader. Vue won't automatically import svg without a loader.

只需将其粘贴！ (打开svg文件，然后将其复制并粘贴到模板中.)我认为最好的选择是，尤其是在原型设计或小型项目中.像这样:

Just paste it in! (Open the svg file and copy paste it into the template.) The best option in my opinion, especially when prototyping or for smaller projects. Like so:

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

如果那样会使以后变得太拥挤，只需制作一个新组件，将其命名为Logo，然后在其中粘贴svg，然后将MainLogo组件导入标头即可.

If that would make it too crowded later on, just make a new component, call it say Logo, and paste svg in there and then import MainLogo component into your header.

不需要svg-loader.尽管加载程序是开发人员的依赖项，所以无论如何都不会花费您；他们只会做您可以手动执行的相同操作.

No need for svg-loaders. Though loaders are a dev dependency, so not like it would cost you anyway; they would just do the same thing you can do manually.

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

欢呼

这篇关于Vue.js如何导入SVG徽标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！