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'}"/>

多好，一會兒就解決了。

白白繞了這麼一大圈