在Vue中使用CSS圖片,我們可以使用Vue的綁定語法,將圖片路徑綁定到對(duì)應(yīng)的DOM元素上。例如,我們有一個(gè)圖片路徑為“images/vue-logo.png”的img元素:
<img src="images/vue-logo.png">
我們可以將圖片路徑綁定到vue實(shí)例的data中:
data: {
imgSrc: 'images/vue-logo.png'
}
然后在img元素中使用vue的綁定語法,將圖片路徑綁定到src屬性上:
<img :src="imgSrc">
除了使用圖片路徑綁定外,我們還可以使用CSS屬性background-image來設(shè)置CSS圖片。例如:
<div :style="{ backgroundImage: 'url(' + imgSrc + ')' }"></div>
這個(gè)例子中,我們將imgSrc綁定到一個(gè)div元素的backgroundImage屬性上,以展示一個(gè)CSS圖片。