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