<template>
<div id="tab-bar">
<div class="tab-bar-item">
<img src="/src/assets/img/1.svg" alt="">
首页
</div>
<div class="tab-bar-item">
<img src="/src/assets/img/2.svg" alt="">
分类
</div>
<div class="tab-bar-item">
<img src="/src/assets/img/3.svg" alt="">
购物车
</div>
<div class="tab-bar-item">
<img src="/src/assets/img/4.svg" alt="">
我的
</div>
<img src="/src/assets/img/630 (3).png" alt="">
</div>
</template>
<script>
export default {
name: "TabBar"
}
</script>
<style scoped>
#tab-bar {
display: flex;
background-color: #f6f6f6;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 -1px 1px rgba(100, 100, 100, .1);
}
.tab-bar-item img {
width: 24px;
height: 24px;
}
</style>

```javascript
```javascript
直接@/assets/logo.png
@/
代表 src/
,这种写法在项目任何地方都能用,可以忽略当前文件的位置
也可能是你在src前多加了个/
假设你的src是img/img_1.png说明img文件夹和本页面是同一级(同一目录下),如果img文件夹和本页面的父文件夹同一级,则src为../img/img_1.png,../表示更外一层文件夹,不这样找不到文件的.
这个要看你的具体路径,
目前你设置的是相对路径,跑起来后,看看能不能直接访问到图片,如果可以,那就是路径设置问题,
如果不行,那就是图片的权限问题
我看了别人的回答,如果不行的话,你尝试用import 倒入图片,然后放在src 后面,
这个跟你当前文件的路径和头图所在路径是有关系的。发一个你目录结构的图来看看。
用..(点点)表示上一级,这种试试
我的目录结构是这样的,用下面的代码能正常显示。