在創(chuàng)建web應(yīng)用程序中，我們經(jīng)常需要使用到圖片來(lái)增強(qiáng)我們的UI界面以及展示產(chǎn)品。HTML可以使用標(biāo)簽引用外部圖片。而在Vue中，要引用外部圖片，我們可以使用v-bind指令或者直接使用
標(biāo)簽。
使用v-bind指令引用圖片時(shí)，需要將圖片的路徑綁定到指令所在元素的屬性中。例如，下面代碼中的
<template>
<div v-bind:style="{ backgroundImage: 'url(' + imgUrl + ')' }"></div>
</template>
<script>
export default {
data() {
return {
imgUrl: require('./assets/img/image.png')
}
}
}
</script>在上述代碼中，我們創(chuàng)建了一個(gè)data屬性：imgUrl。該屬性的值為require('./assets/img/image.png')，這個(gè)值是一個(gè)字符串，表示圖片文件的路徑。我們使用v-bind:style指令將路徑綁定到
這種方法可以實(shí)現(xiàn)簡(jiǎn)單的背景圖片顯示，但如果我們需要在頁(yè)面中展示具有src屬性的img元素，就需要直接使用標(biāo)簽。下面是一個(gè)簡(jiǎn)單的例子：
<template>
<div>
<img :src="imgUrl">
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: require('./assets/img/image.png')
}
}
}
</script>在上述代碼中，我們創(chuàng)建了一個(gè)data屬性：imgUrl。該屬性的值同樣是一個(gè)字符串，表示圖片文件的路徑。我們直接在元素中使用v-bind指令將路徑綁定到src屬性上，就可以在頁(yè)面中展示圖片了。
需要注意的是，在Vue中我們可以使用require函數(shù)，將靜態(tài)的資源文件引入到我們的組件中。require可以將圖片路徑轉(zhuǎn)化為圖片的URL，從而實(shí)現(xiàn)圖片的引用。在上述例子中，我們使用require函數(shù)引入圖片，并將返回值作為imgUrl屬性的值。
除了使用require函數(shù)，我們還可以使用絕對(duì)路徑或相對(duì)路徑的方式引用圖片，例如：
<img src="/static/img/image.png">
<img src="../assets/img/image.png">使用絕對(duì)路徑時(shí)，圖片路徑以/開頭；使用相對(duì)路徑時(shí)，圖片路徑以../開頭。
在Vue中引用圖片并不難，但需要注意的是，需要將圖片文件放到項(xiàng)目的靜態(tài)資源文件夾中，否則Vue將無(wú)法找到這些圖片文件。