在开发Vue专案时,时常会使用binding的技巧,用以动态变更参数的值,
如下
<div class="sensorlist_icon" :style="{backgroundImage: 'url(' + getsensorImg(item.Type) + ')'}"></div>
但如果返回的图片路径在Server端不存在,或是客户端突然新增了新的SensorType,导致没有对应的图片可以显示,此时若甚么都不做浏览器会直接报错,但我希望在没有对应的图片时能够显示预设的图片,方法如下:
getsensorImg(Type) { let sensor = "DefaultSensor"; if (Type) { sensor = Type; } var img = new Image(); try { img.src = require(`@/assets/img/Sensor/${sensor}.svg`); return require(`@/assets/img/Sensor/${sensor}.svg`); } catch { return require(`@/assets/img/Sensor/DefaultSensor.svg`); } },