把图片当成模块用require引入图片地址(不带图片名称),后面加上循环遍历的图片名称拼接后就可以展示图片。
即 require('@/assets/images/home/' + item.url) // item.url 为图片名称
亲测有效代码如下:
<template>
<div>
<el-card class="box-card">
<div slot="header">
<div class="diplay-header">
<span style="font-weight: 700; font-size: 16px">常用功能</span>
<span style="font-size: 14px;color: rgba(48, 126, 243, 1);">设置</span>
</div>
</div>
<div class="body body-box">
<div class="div-box" v-for="item in cardList" :key="item.id">
<div class="box-circle" :style="`background: ${item.color};`">
<img class="i-img" :src="require('@/assets/images/home/' + item.url)" alt="">
</div>
<div style="margin-top: 12px;">{{ item.name }}</div>
</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
data() {
return {
cardList: [
{
id: 1,
name: '待分发业务处理',
url: 'img_01.png',
color: 'linear-gradient(138.6deg,#27d1d1 0%,#3fc7cd 100%);'
},
{
id: 2,
name: '待审批业务申请',
url: 'img_02.png',
color: 'linear-gradient(138.6deg,#ffc04e 0%,#ff9119 100%);'
},
{
id: 3,
name: '待审批任务',
url: 'img_03.png',
color: 'linear-gradient(138.6deg,#6fa1ff 0%,#477cff 100%);'
},
{
id: 4,
name: '预留分类',
url: 'img_04.png',
color: 'linear-gradient(138.6deg,#677eff 0%,#6469ff 100%);'
},
{
id: 5,
name: '预留分类',
url: 'img_05.png',
color: 'linear-gradient(138.6deg,#33d3d3 0%,#3fc7cd 100%);'
},
{
id: 6,
name: '预留分类',
url: 'img_06.png',
color: 'linear-gradient(138.6deg,#f6a562 0%,#f46732 100%);'
},
{
id: 7,
name: '预留分类',
url: 'img_07.png',
color: 'linear-gradient(138.6deg,#ffc04e 0%,#ff9119 100%);'
},
{
id: 8,
name: '预留分类',
url: 'img_08.png',
color: 'linear-gradient(138.6deg,#6fa1ff 0%,#477cff 100%);'
}
]
}
}
}
</script>
<style lang="scss" scoped>
.body-box{
display: flex!important;
justify-content: space-around;
align-items: center;
}
.div-box {
text-align: center;
width: 12.5%;
}
.box-circle {
position: relative;
margin: 0px auto;
width:50px;
height:50px;
background-color: aqua;
border-radius: 35px;
i {
width: 24px;
height: 24px;
}
}
.i-img{
position:relative;
top: 9px;
}
.diplay-header {
display: flex;
justify-content: space-between;
}
</style>