img標簽src不給路徑就會出現邊框

<img/>在src加載失敗或沒有給的，瀏覽器會自動給img加上邊框。
如下圖這樣：

產品覺得影響美觀，一定要pass掉。

原碼是這樣：

.ctn{
	position: relative;
	width: 2.8rem; 
	height: 2.8rem;
	border-radius: 3px;
	overflow: hidden;
	background: #FFF;
}
.ctn .title{
	position: absolute;
	top: 0;
	width: 2.8rem; 
	height: 2.8rem;
	background:rgba(0,0,0,.35) ;
	color: #FFF;
	font-size: .52rem;
	font-weight: bold;
	padding:0 .4rem;
}
.ctn img{
	width: 2.6rem;
	height: 2.2rem;
	margin: .3rem auto;
	object-fit: cover;
	background: url(images/120X120.jpg?201608012) no-repeat center;
	background-size: 2.2rem;
}

<div class="ctn">
    <div class="title sn-flex center">
	    <p>休閑西裝</p>
    </div>
	<img src=""/>
</div>

百度一下，在知乎上找到了解決方案，鏈接在這https://www.zhihu.com/question/27426689

基於能用css實現就不用js的原則，選擇了以下的解決方案：
給img包個div

<div class="ctn">
    <div class="title sn-flex center"><p>收腰款</p></div>
    <div class="img-ctn">
         <img  src="temp/app_200x200.jpg"/>
    </div>
</div>

.ctn .img-ctn{
	width: 2.6rem;
	height: 2.2rem;
	margin: .3rem auto;
	overflow: hidden;
}
.ctn .img-ctn img{
	width: -webkit-calc(2.6rem + 2px);
	height: -webkit-calc(2.2rem + 2px);	
	width: calc(2.6rem + 2px);
	height: calc(2.2rem + 2px);
	background: url(images/120X120.jpg?201608012) no-repeat center;
	background-size: 1.8rem;
	margin: -1px;
	object-fit: cover;	
}

but，有問題，無圖片時上下的border是隱藏了，左右無論怎么樣都隱藏不了，暫時沒查出來問題，於是改成了這樣：

.ctn .img-ctn{
	width: 2.6rem;
	height: 2.2rem;
	margin: .3rem auto;
	overflow: hidden;
	background: url(images/120X120.jpg?201608012) no-repeat center;
	background-size: 1.8rem;
}
.ctn .img-ctn img{
	width: inherit;
	height: inherit;
	object-fit: cover;
}
/*無src隱藏*/
.ctn .img-ctn img[src='']{
	visibility: hidden;
}

后來，在控制台調試時，忽然靈光乍現，FUCK，是reset樣式的問題。

原來，base.css
對img做了這個

img {
    max-width: 100%;
}

hehe，重新又改成這樣：

.ctn .img-ctn{
	width: 2.6rem;
	height: 2.2rem;
	margin: .3rem auto;
	overflow: hidden;
}
.ctn .img-ctn img{
	width: -webkit-calc(2.6rem + 2px);
	height: -webkit-calc(2.2rem + 2px);	
	width: calc(2.6rem + 2px);
	height: calc(2.2rem + 2px);
	background: url(images/120X120.jpg?201608012) no-repeat center;
	background-size: 1.8rem;
	margin: -1px;
    /*就是這貨*/
	max-width: none;
	object-fit: cover;	
}

ok，提交給開發，終於可以偷懶一會了。

however，改變來的太快。開發發來了一張圖：

去開發機上調試一下，瞬間感受到了深深的惡意。

原來圖片的背景圖層是透明的，盒子模型的渲染層級是color>src>background-image>background-color，圖片空白區域透明自然就顯示背景圖片了。

img{
    background: red url(images/120X120.jpg?201608012) no-repeat center;
}

<img src=".png">

感覺自己的洪荒之力已經用完了。。。。

at the end，為了規避這種圖片出現，直接不給背景圖片了，還是通過模板引擎來判斷吧

<img src="{$src||'images/120X120.png'}"/>

多好，一下子就解決了。

白白繞了這么一大圈