[ html5 ] 图片默认外边框

项目框架 vue-webpack

问题： 图片从后台请求渲染时，当请求图片连接失败的时候 img-src 为空 ，在谷歌浏览器 和 苹果手机上会显示默认边框。 如图：

思路一： 看到这个问题后首先想到是img的默认样式
查看代码发现base.css 里面是有 img { border-style: none; } 去除边框的代码的

思路二： 接下来尝试了下css属性 img[src=""] 发现也没有起到做用

思路三： css实在想不出来 ，只能用vue 的img :onerror属性
犹豫当下的场景是头像上面覆盖的头像框，因此作了一个透明3*3px的图片

// 标签
	<img :onerror="errorUserPhoto" :src="headimg" alt="" @load="resizeimg()" id="headImg">
	//  引入
	import userPhoto from "@/assets/my.live/user.png";
	// 绑定
	errorUserPhoto: 'this.src="' + userPhoto + '"'

思路四： 然而这种解决思路比较麻烦 通过度娘一顿操做，

终于！！ 神仙属性！！！

img[src=""],img:not([src]){opacity:0;}

就是这行样式 直接搞定！！！！

完美达到我想要的效果，居然把这属性都忘的不折不扣了。。。