在组件中，有时需要引用一些静态资源，例如图片资源、CSS代码资源等。通过项目的public目录和src\assets目录都可以存放静态资源，但引用静态资源的方式不同，下面分别进行讲解。

1. 引用public目录中的静态资源

public目录用于存放不可编译的静态资源文件，该目录下的文件会被复制到打包目录，该目录下的文件需要使用绝对路径访问。

例如，在组件中引用public目录中的demo.png文件，示例代码如下。

<img src="/demo.png" >

演示引用public目录中静态资源的方法

创建src\components\Image.vue文件。

<template>
  <img src="/vite.svg" >
</template>

2. 引用src\assets目录中的静态资源

src\assets目录用于存放可编译的静态资源文件，例如图片、样式文件等。该目录下的文件需要使用相对路径访问。

在引用src\assets目录中的图片时，首先将图片保存到本地，然后使用import语法将图片导入需要的组件，最后通过img元素的src属性添加图片的路径。

演示引用src\assets中静态资源的方法

创建src\components\Icon.vue文件。

<template>
  <img :src="icon">
</template>
<script setup>
import icon from '../assets/vue.svg'
</script>