Vue中的img標(biāo)簽可以用來呈現(xiàn)圖片。它可以使用v-bind指令來動(dòng)態(tài)地綁定一個(gè)圖片URL到src屬性上：

<template>
<div>
<img v-bind:src="imgUrl">
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: 'http://example.com/my-image.jpg'
}
}
}
</script>

我們可以把imgUrl綁定到一個(gè)計(jì)算屬性或者vuex store中：

<template>
<div>
<img v-bind:src="fullImageUrl">
</div>
</template>
<script>
export default {
computed: {
fullImageUrl() {
return this.$store.state.imageBaseUrl + this.currentImage.filename;
}
},
data() {
return {
currentImage: {
filename: 'my-image.jpg'
}
}
}
}
</script>

還可以使用v-if和v-else來實(shí)現(xiàn)圖片加載失敗的情況下顯示備用圖片或者錯(cuò)誤信息：

<template>
<div>
<img v-bind:src="imgUrl" v-on:error="setImageNotFound">
<img v-if="imageNotFound" src="backup-image.jpg">
<p v-else>Failed to load image.</p>
</div>
</template>
<script>
export default {
data() {
return {
imageNotFound: false,
imgUrl: 'http://example.com/image-not-found.jpg'
}
},
methods: {
setImageNotFound() {
this.imageNotFound = true;
}
}
}
</script>

總之，Vue的img標(biāo)簽非常強(qiáng)大，可以幫助我們實(shí)現(xiàn)各種圖片加載和展示的需求。