vue3 快速入门 (三) : vue中的图片路径

news2024/11/15 12:24:55

1. 本文环境

Vue版本 : 3.4.29
Node.js版本 : v20.15.0
系统 : Windows11 64位
IDE : VsCode

2. 加载图片路径的方式

以下是VUE3中一些常见的引用图片路径的方法：

2.1 public文件夹的方式

2.1.1 public文件夹是什么

在 Vue3 中，public文件夹用于存放静态资源，这些资源不会被 vite打包工具解析处理。在项目打包时，public目录下的资源会被直接复制到输出目录（通常是dist目录）。

2.1.2 使用public文件夹

因为放在public文件夹下的文件，打包的时候不会被重命名。
所以可以使用相对路径 /xxxx.后缀名 来访问该文件。

比如我们在项目根目录新建public文件夹，public文件夹里面有mytest.png，然后可以直接使用相对路径/public/mytest.png或直接使用/mytest.png来访问。

<img src="/public/mytest.png">
<!-- 等同于上面这个 -->
<img src="/mytest.png">

2.2 直接在模板中引用

2.2.1 @是什么

在 Vue3 中，@通常用作路径别名，代表项目的根目录下的src目录。
这样做的好处是在引入文件时，可以使用@来代替相对复杂的src目录路径，使代码更加简洁、易读，同时也避免了易错的相对路径问题。

vite.config.ts默认就有配置 @ 指向 src 目录

 resolve: {
   alias: {
     '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }

2.2.2 模板中引用

那么在 Vue 中，你可以直接使用相对路径或 @ 符号来引用图片。例如，如果你的图片位于 src/assets/images 目录下，并且你已经在 vue.config.js 或其他配置文件中设置了 @ 指向 src 目录，那么你可以这样引用图片：

<template>
  <img src="@/assets/images/your-image.png" alt="Your Image">
</template>

<script setup lang="ts">
</script>

4.3 在 `<script setup>` 中引用图片路径

虽然大多数情况下你会直接在模板中引用图片，但有时你可能需要在 <script setup> 中引用图片路径，比如为了动态绑定 src 属性。你可以使用 import 语句来引入图片，但请注意，Vue 不会自动处理这些 import 语句作为模块请求，因此你需要确保它们被正确解析为文件路径。

然而，Vue CLI 或 Vite 等现代前端工具链通常会配置 Webpack 或 ESBuild 等打包工具来解析这些 import 语句，并将其转换为适当的 URL。这意味着你可以像下面这样操作：

<script setup lang="ts">
import yourImagePath from '@/assets/images/your-image.png';

const imageSrc = yourImagePath; // 这里 imageSrc 将会是图片的编译后路径
</script>

<template>
  <img :src="imageSrc" alt="Your Image">
</template>