关于vue中图片相关src相对路径不同情况

这个src其实分不同情况有不同写法

一、img标签相对路径写法

在img标签内还是按照常规写法

<!-- 引用同级文件，./可省略 -->
<img src="./**.jpg" alt="">
<img src="**.jpg" alt="">

<!-- 引用下级文件，./可省略 -->
<img src="./assets/**.jpg" alt="">
<img src="assets/**.jpg" alt="">

<!-- 引用上级文件 -->
<img src="../**.jpg" alt="">

<!-- 引用上上级文件 -->
<img src="../../**.jpg" alt="">

打个比方

C:\Aa\Ba\Ca\img1.jpg

C:\Aa\Ba\Ca\html.html

这张图片相对于html文件就是同级，相对路径就是使用“./img1.jpg”或“img1.jpg”

C:\Aa\Ba\Ca\img1.jpg

C:\Aa\Ba\Cb\html.html

这张图片在html文件的上一级目录出现了劈叉，相对路径就得往上走一级“../Ca/img1.jpg”

C:\Aa\Bb\img1.jpg

C:\Aa\Ba\Cb\html.html

这张图片在html的上上级目录出现了劈叉，写在html里的img相对路径就是“../../Bb/img1.jpg”

可以自己试一下

HTML中img相对路径的学习测试文件夹资源-CSDN文库

二、vue内头像等其他图片用法

但是在vue其他标签，如avatar头像就需要使用require动态解析路径并添加@/或者../../

<a-avatar class="avatar" size="small" :src="require('@/assets/**.jpg')" />

<a-avatar class="avatar" size="small" :src="require('../../assets/**.jpg')" />

推荐讲解：

Vue图片路径问题（动态引入：绝对路径、相对路径），require动态路径问题_vue相对路径-CSDN博客

HTML引入图片-绝对路径和相对路径_html图片插入路径-CSDN博客