[Vue] 判断图片是否存在

在开发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`);      }    },

关于作者: 网站小编

码农网专注IT技术教程资源分享平台,学习资源下载网站,58码农网包含计算机技术、网站程序源码下载、编程技术论坛、互联网资源下载等产品服务,提供原创、优质、完整内容的专业码农交流分享平台。

热门文章