前言
今天在看公司项目代码时,发现了一个比较有趣的动画,审查元素才发现是一个gif动图,查看相关代码发现图片路径写的是../../../xxx/xxx.gif
于是我按照之前的习惯向上找三级,找了半天没有找到那个文件,最后全局搜索发现文件是存在根目录的public
文件夹下。
寻根
这就让我很疑惑,我开始猜测是不是在那个配置文件里面有特殊的配置,一顿操作还是没有找到相关配置,然后又开始怀疑是不是我项目不熟悉没找到,于是我新建了一个Vue3项目,写下了如下代码:
<template>
<div>测试图片页面</div>
<img :src="bgImg1" alt="测试图片">
<img :src="bgImg2" alt="测试图片">
<img :src="bgImg3" alt="测试图片">
<img :src="bgImg4" alt="测试图片">
<img :src="bgImg5" alt="测试图片">
<img :src="bgImg6" alt="测试图片">
</template>
<script setup lang="ts">
const bgImg1 = '../static/runningbg.gif'
const bgImg2 = '../../static/runningbg.gif'
const bgImg3 = '../../../static/runningbg.gif'
const bgImg4 = '/static/runningbg.gif'
const bgImg5 = './static/runningbg.gif'
const bgImg6 = 'static/runningbg.gif'
</script>
然后有趣的事情发生了,这上面的6种方式居然都能显示出图片,这就触及到我知识的盲区了,为什么都会显示出来呢
审查元素发现所有的图片地址都是从根目录下面开始的
查找资料
我又猜测是vue打包的问题,于是我打开了vue-cli官网,找到了public
文件夹的相关介绍:
我个人理解的就是,存在public
文件夹下面的内容都会被认为是静态资源,不会经过webpack打包,会直接复制到部署环境的根目录下,访问也只能通过相对路径访问,所以使用../ ../../ ../../../ ./ /
都是访问的根目录,根目录没有上级文件了,随便写啥都一样。
最后
今天算是又学到了一点新的知识点,有所收获,如果对你有点帮助的话就点个赞吧