在 Vue3 项目中，我们经常需要引入图片来展示或使用。本文将介绍四种常见的图片引入方式，并给出具体的实现示例。

一、import 方式引入
通过 import 将图片作为模块引入，然后在模板中使用。

<script setup lang="ts">
import logo from '@/assets/logo.png'
</script>

<template>
   <el-image :src="logo"></el-image>
</template>

优点：代码清晰，路径明确。配合 TypeScript 可以获得类型检查支持。

注意：适用于 Vite 和 Webpack 构建工具。

二、require 方式引入
通过 require 动态引入图片。

<script setup lang="ts">
const logo = require('@/assets/logo.png')
</script>

<template>
   <el-image :src="logo"></el-image>
</template>

优点：动态加载图片。

注意：如果使用 Vite 构建工具，则无法使用 require，推荐使用其他方法。

三、img 标签引入
直接在模板中通过 <img> 标签的 src 属性引入图片。

<template>
   <img src="../assets/logo.png" alt="Logo">
</template>

优点：简单直观，无需额外的 JavaScript 配置。

注意：图片路径是相对于当前文件所在路径。如果路径不正确，图片可能无法正常加载。

四、background-image 样式引入
通过 CSS 的 background-image 属性引入图片，通常用于背景图设置。

<style scoped>
.background {
   width: 200px;
   height: 200px;
   background-image: url("../assets/logo.png");
   background-size: cover;
   background-position: center;
}
</style>

<template>
   <div class="background"></div>
</template>

优点：适合用于设置容器背景。

注意：图片路径相对于当前 CSS 文件。

在大型项目中，推荐使用 CSS 预处理器（如 SCSS）管理图片路径。

以上就是在 Vue3 项目中引入图片的四种常见方式。根据不同的需求和场景，可以选择合适的方法来实现图片的引入。