前端------动态修改本地图片(根据需求,频繁改样式)

    

                                        id="iv_device_electric"

                                        style="color:white;margin-top:-5px ;width:20px;hight:12px"

                                        src="../../assets/images/electric_100.png"

                                    />

 比如,你有一个电量的图片。默认是100% 图片都放在assets下。

 

  var iv = document.getElementById('iv_device_electric');

                    if (resultBatteryValue == '0') {

                        iv.src = require('../../assets/images/electric_0.png');

                    } else if (resultBatteryValue > 0 && resultBatteryValue <= 10) {

                        iv.src = require('../../assets/images/electric_10.png');

                    } else if (resultBatteryValue > 10 && resultBatteryValue <= 20) {

                        iv.src = require('../../assets/images/electric_20.png');

                    } else if (resultBatteryValue > 20 && resultBatteryValue <= 30) {

                        iv.src = require('../../assets/images/electric_30.png');

                    } else if (resultBatteryValue > 30 && resultBatteryValue <= 40) {

                        iv.src = require('../../assets/images/electric_40.png');

                    } else if (resultBatteryValue > 40 && resultBatteryValue <= 50) {

                        iv.src = require('../../assets/images/electric_50.png');

                    } else if (resultBatteryValue > 50 && resultBatteryValue <= 60) {

                        iv.src = require('../../assets/images/electric_60.png');

                    } else if (resultBatteryValue > 60 && resultBatteryValue <= 70) {

                        iv.src = require('../../assets/images/electric_70.png');

                    } else if (resultBatteryValue > 70 && resultBatteryValue <= 80) {

                        iv.src = require('../../assets/images/electric_80.png');

                    } else if (resultBatteryValue > 80 && resultBatteryValue <= 90) {

                        iv.src = require('../../assets/images/electric_90.png');

                    } else {

                        iv.src = require('../../assets/images/electric_100.png');

                    }

  在js中,比如网络请求或者其他切换的方法内,写上述格式。就可以动态替换了,验证过,好用。核心: require()必须要有。否则你图片加载是失败的,裂开的

 

你可能感兴趣的:(前端------动态修改本地图片(根据需求,频繁改样式))