在Vue中,我們經常需要在模板中顯示圖片。這個時候,我們可以使用img標簽。在Vue中使用img標簽也很簡單,我們只需要將其綁定到一個變量上就可以了。
<template>
<div>
<img :src="imageUrl" alt="Vue logo">
</div>
</template>
<script>
export default {
data () {
return {
imageUrl: 'https://vuejs.org/images/logo.png'
}
}
}
</script>
我們可以在data中定義一個imageUrl變量,并將其綁定到img的src屬性上。這樣,我們就可以在模板中顯示一張圖片了。
不過,在實際開發中,我們可能需要動態地改變圖片的路徑。比如說,我們有一個按鈕,當用戶點擊這個按鈕時,我們需要顯示不同的圖片。這個時候,我們需要在方法中動態地改變imageUrl的值。
<template>
<div>
<img :src="imageUrl" alt="Vue logo">
<button @click="changeImage">Change Image</button>
</div>
</template>
<script>
export default {
data () {
return {
imageUrl: 'https://vuejs.org/images/logo.png'
}
},
methods: {
changeImage () {
this.imageUrl = 'https://vuejs.org/images/vmS.png'
}
}
}
</script>
在上面的代碼中,我們添加了一個按鈕,并給按鈕綁定了一個點擊事件。當用戶點擊這個按鈕時,會執行changeImage方法。在changeImage方法中,我們動態地改變了imageUrl變量的值。
總的來說,在Vue中使用img標簽非常簡單,我們只需要將其綁定到一個變量上就可以了。如果需要動態地改變圖片的路徑,我們可以在方法中動態地改變imageUrl的值。