vueh5给css传参，动态显⽰图⽚只贴关键代码：
h5代码：
<img class="warning-icon" v-for="item inwarningDataList"
:
warning-icon-x warning-icon-y :src='weatherImg(item.img_icon)' :key="item.img_x+ item.img_y"/>计算属性动态加载图⽚ 资源：
computed: {
weatherImg() {
return function (imgName) {
const context =t('../../../assets/images/warning/', true, /\.(png|jpg|svg)$/);
return context('./' + imgName +'.svg');
};
}
},
测试数据（图表在本地）：
warningDataList: [
{
img_x:'156px',
img_y:'92px',
img_icon:'icon_blue_blue'
},
{
img_x:'196px',
img_y:'72px',svg和h5的关系
img_icon:'icon_blue_red'
},
{
img_x:'256px',
img_y:'122px',
img_icon:'icon_rain_yellow'
},
{
img_x:'126px',
img_y:'52px',
img_icon:'icon_hail_orange'
}
],
css代码(接收参数）：
.warning-icon[warning-icon-x] {
top:var(--warning-icon-x);
}
.warning-icon[warning-icon-y] {
left:var(--warning-icon-y);
}
最终效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。