Vue图片加载更优雅。 使用自定义指令，图片没加载之前用随机颜色代替。加载完成后再显示图片。

<div id="app" v-image = "item " v-for="item in imageList"></div> <script> Vue.directive("image", { inserted: function(el，binding){ var color = Math.floor(Math,random()*1000000) el.style.backgroundColor = "#" color var img = new Image() img.src = binding.vaule img.onload = function(){ el.style.backgroundImage = “url(” binding.vaule ")" } } }) new Vue({ el: "#app", data: { imageList: [ { url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/homepage/section4/home-s4-p10-plus.jpg" }, { url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/greate-china/cn/mkt/homepage/section4/home-s4-watch2-pro-banner.jpg" }, { url: "http://consumer-img.huawei.com/content/dam/huawei-cbg-site/en/mkt/homepage/section4/home-s4-matebook-x.jpg" } ] } }) </script>