用vue如何在页面添加logo

在Vue项目中添加Logo的方法有很多种，下面是一些常见的方法：

1. 使用<img>标签直接引用静态文件。
2. 通过import语句导入图片文件。
3. 在<template>中使用<img>标签和动态绑定。

下面详细描述其中的一种方法：通过<img>标签直接引用静态文件。

一、通过``标签直接引用静态文件

这种方法是最简单的，只需要将Logo图片文件放置在项目的静态资源文件夹中，然后使用<img>标签引入。

1. 将Logo图片放置在public文件夹：

   • 将Logo图片文件（例如：logo.png）放置在Vue项目的public文件夹中。

2. 在组件中使用<img>标签引用图片：

   • 在需要显示Logo的组件中，使用<img>标签引入Logo图片。

<template>

  <div>
    <img src="/logo.png" alt="Logo">
  </div>
</template>
<script>
export default {
  name: 'LogoComponent'
}
</script>
<style scoped>
/* 添加一些样式 */
img {
  width: 100px;
  height: auto;
}
</style>

二、通过`import`语句导入图片文件

这种方法通过import语句导入图片文件，然后在<img>标签中使用绑定变量。

1. 将Logo图片放置在src/assets文件夹：

   • 将Logo图片文件（例如：logo.png）放置在Vue项目的src/assets文件夹中。

2. 在组件中使用import语句导入图片：

   • 在需要显示Logo的组件中，通过import语句导入Logo图片，并在<img>标签中使用绑定变量。

<template>

  <div>
    <img :src="logo" alt="Logo">
  </div>
</template>
<script>
import logo from '@/assets/logo.png';
export default {
  name: 'LogoComponent',
  data() {
    return {
      logo
    }
  }
}
</script>
<style scoped>
/* 添加一些样式 */
img {
  width: 100px;
  height: auto;
}
</style>

三、在`