vue h5给css传参，动态显示图片

只贴关键代码：

h5代码：

<img class="warning-icon" v-for="item inwarningDataList"

    :style="'--warning-icon-x:'+(item.img_x)+';--warning-icon-y:'+(item.img_y)"

    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 =require.context('../../../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',

        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);

}

最终效果