在 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 项目中引入图片的四种常见方式。根据不同的需求和场景，可以选择合适的方法来实现图片的引入。