antd中for循环动态绑定图片
template部分代码
<!-- 首页图标内容展示 begin-->
<div class="downCard">
<a-card title="核心支撑" :bordered="false">
<a-card-grid
class="gird"
@click.native="search(t)"
:id="t.SUBSYSTEM_ORDER"
:key="index"
v-for="(t, index) in core"
>
<img
class="imgUI"
:src="imgSrc(t)"
/>
<p>{{ t.SUBSYSTEM_NAME }}</p>
</a-card-grid>
</a-card>
</div>
<!-- 首页图标内容展示 end-->
class样式
.downCard {
margin-top: 20px;
}
.downCard .downCardChildren {
width: 100%;
height: 130px;
margin-top: 20px;
margin-bottom: 20px;
}
.gird{
width: 25%;
text-align: center;
cursor: pointer
}
.imgUI{
width: 40px;
height: 40px;
margin-left: 13px
}
js代码
//动态绑定图标UI
imgSrc(t) {
return require('@static/img/' + t.SUBSYSTEM_IMG);
}
效果