在Vue頁面中如何更優雅地引入圖片詳解
在我們寫vue項目中肯定會用到各種圖片,那麼如何更好的使用圖片資源呢。這裡我講一下我常用的方法。
錯誤示范
也許你的代碼裡常常會這樣寫
<template> <img :src="src"> </template> <script> export default{ data(){ return { src: require('xxx.jpg') } } } </script>
在webpack中,require會自動處理資源,這塊沒問題,但是你放到vue的data裡,vue會遍歷data,給src加上響應式,但其實大部分時間,這個src並不需要響應式,這裡造成瞭性能浪費。
通過computed
解決上面這個錯誤方案,解決的方案之一:computed
<template> <img :src="src"> </template> <script> const src = require('xxx.jpg') export default{ computed:{ src(){ return src } } } </script>
computed本身就有緩存,可以減少一些性能浪費
當圖片不變的時候直接引入
<template> <img :src="src"> </template>
或者
<template> <div class="bg"></div> </template> <style> .bg{ background:url("xxx.jpg") } </style>
當我們這個圖片不會變化的時候,可以直接引入,並不需要賦值一個變量。
同樣,也可通過切換class名去動態顯示圖片,這樣也比較好
<template> <div :class="flag ? 'bg1':'bg2'"></div> </template> <script> export default{ data(){ return { flag: true } } } </script> <style> .bg1{ background:url("xxx1.jpg") } .bg2{ background:url("xxx2.jpg") } </style>
通過css變量切換圖片
這個隻是我剛剛想起來的一個想法,理論上css變量可以存儲任何東西,那能否存放圖片地址呢。
<template> <div class="bg"></div> </template> <script> export default{ mounted(){ // 第一種方法,圖片地址或base64 this.$el.style.setProperty('--bg',`url("http://xxx.com/1.jpg")`) // 第二種方法 this.$el.style.setProperty('--bg',`url("${require('../assets/1.png')}")`) } } </script> <style> .bg{ --bg:url('xxx.jpg'); background-image:--bg; } </style>
個人測試成功,這個方法也可用,而且會比computed更好些,畢竟操作css變量開銷更小。這個方法需要註意的是,css中圖片一般都是寫在url中的,因此需要拼接一個字符串url(你的內容)。
通過css繪制
這個其實算一個題外話,有的時候一些圖像其實是可以通過css畫出來的,例如下圖中這個三角,大傢百度一下就會有各種css三角生成器,這種圖形用css會比引入一個圖片更好。
總結一下,就是不要在vue的data中引入圖片,還是盡量使用css
總結
到此這篇關於在Vue頁面中如何更優雅地引入圖片的文章就介紹到這瞭,更多相關Vue更優雅引入圖片內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!