vue3数据库中存头像图片相对路径在前端用prop只能显示路径或无法显示图片只能显示alt中内容的问题的解决

不想看前情可以直接跳到头像部分代码

前情:

首先我们是在数据库中存图片相对路径,这里我们是在vue的src下的assets专门建一个文件夹img存头像图片。

然后我们如果用prop="avatar" label="头像"是只能显示图片路径的,即loginBG6这样的文字。我们的目的是显示图片,直接用<img src="avatar" />的方式,结果是不能成功的。

我们尝试直接<img src="@/assets/img/loginBG6">是可以出来图片的,只是所有显示的图片都是同一张。我们想要每一行对应的图片要用到scope。通过scope.row.avatar获取这一行对应的图片。

我们的图片不是存在static文件夹中的,这里需要require一下才行。我们在数据库中存的是相对路径,那么我们可以在require中补齐路径。其实也不算补完整,这里补了之后也是相对的,变成@/assets....这种的也就是相对在根目录下。

头像部分代码:

html 复制代码
<el-table-column label="头像">
                        <template #default="scope">
                            <el-image :src="require(`@/assets/img/${scope.row.avatar}`)" :alt="picture"
                                      style="width: 60px; height: 60px;"></el-image>
                        </template>
                    </el-table-column>

表格整个的代码:

html 复制代码
<el-table :data="userData" class="userList-table" :header-cell-style="{ textAlign: 'center' ,height: '70px', background: 'ghostwhite'} "
                          :cell-style="{ textAlign: 'center' }">
                    <el-table-column prop="username" label="姓名"></el-table-column>
                    <el-table-column prop="password" label="密码"></el-table-column>
                    <el-table-column prop="phone" label="电话号码"></el-table-column>
                    <el-table-column prop="email" label="邮箱"></el-table-column>
                    <el-table-column prop="sex" label="性别"></el-table-column>
                    <el-table-column prop="age" label="年龄"></el-table-column>
                    <el-table-column label="头像">
                        <template #default="scope">
                            <el-image :src="require(`@/assets/img/${scope.row.avatar}`)" :alt="picture"
                                      style="width: 60px; height: 60px;"></el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <el-button type="primary" class="detail-btn">编辑</el-button>
                        <el-button type="danger" class="bigDelete-btn">删除</el-button>
                    </el-table-column>
                </el-table>

效果:


加油加油^_^

相关推荐
运维咖啡吧几秒前
周一才上线的网站,单单今天已经超过1000访问了
前端·程序员·ai编程
世界哪有真情3 分钟前
用虚拟IP扩容端口池:解决高并发WebSocket端口耗尽问题
前端·后端·websocket
前端世界3 分钟前
打造一个可维护、可复用的前端权限控制方案(含完整Demo)
前端
码不停蹄的玄黓4 分钟前
深入拆解MySQL InnoDB可重复读(RR)隔离级别:MVCC+临键锁如何「锁」住一致性?
数据库·mysql·可重复读
LeQi9 分钟前
当!important成为代码毒瘤:你的项目是不是也中了招?
前端·css·程序员
玲小珑10 分钟前
Next.js 教程系列(九)增量静态再生 (ISR):动态更新的静态内容
前端·next.js
Mintopia19 分钟前
B 样条曲线:计算机图形学里的 “曲线魔术师”
前端·javascript·计算机图形学
前端小巷子22 分钟前
跨域问题解决方案:CORS(跨域资源共享)
前端·网络协议·面试
大大。23 分钟前
van-tabbar-item选中active数据变了,图标没变
java·服务器·前端
Mintopia25 分钟前
Three.js 3D 世界中的噪声运动:当数学与像素共舞
前端·javascript·three.js