今天在做一個app項目的時候，遇到了這樣一個問題，在給定一個img標簽固定寬高的情況下，當img標簽中的src屬性為空時，這塊img區域會有邊框包圍着，導致了當進入一個頁面時，圖片會先閃一下邊框，然后圖片才呈現出來，可能是連通接口的速度不是很快，而在得到圖片路徑之前img標簽的src屬性還是初始為空狀態，所以加載頁面之后會閃一下邊框。
上面左圖在紅色邊框的盒子內的就是src為空時的圖片的樣子。右圖是圖片正常顯示的樣子。
解決方式很簡單，只需在css中添加一行代碼即可：
img[src=""]{ opacity: 0; }
加入之后就不會再有邊框出現。
以vue為例的完整代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script> <style> #app{ border: 1px solid red; width: 600px; height: 400px; overflow: hidden; } #app img{ display: block; width: 300px; height: 200px; margin: 100px 150px; } img[src=""]{ opacity: 0; } </style> </head> <body> <div id="app"> <img :src="picUrl"> </div> <script> var app = new Vue({ el: '#app', data: { picUrl: '', }, mounted() { // this.picUrl = "http://b-ssl.duitang.com/uploads/item/201508/29/20150829234640_hVuCa.thumb.700_0.jpeg"; }, }) </script> </body> </html>