在 Vue 中，模板引用圖片是很常見的操作。如果我們需要在頁面中展示圖片，可以使用 img 標簽，但如果我們需要在 Vue 的模板中引用圖片，那么我們就需要用到綁定語法和 require() 方法。

在上述代碼中，我們可以看到一個常規的 img 標簽。一個簡單的方式是通過引用靜態資源的 URL 來顯示圖片，但這樣做可能會增加頁面加載時間。因此，更好的方法是使用 Vue 的綁定語法。

<template>
<img :src="imageUrl">
</template>
<script>
export default {
data() {
return {
imageUrl: "./images/vue-logo.png",
};
},
};
</script>

在上述代碼中，我們使用了綁定語法，通過綁定 data 中的屬性來實現圖片的引用。在這種情況下，我們將圖片的路徑封裝在 data 對象的 imageUrl 屬性中，然后通過 :src 將其綁定到 img 標簽上。

但是，如果我們引用的圖片在路徑中包含變量，則不能直接使用綁定語法。在這種情況下，我們應該使用 require() 方法來引用圖片。

<template>
<img :src="getImageUrl(imageName)">
</template>
<script>
export default {
methods: {
getImageUrl(imageName) {
return require("./images/" + imageName);
},
},
};
</script>

在上述代碼中，我們定義了一個 getImageUrl() 方法來獲取圖片的路徑。這個方法接受一個 imageName 參數，然后使用 require() 方法來將其轉換為圖片路徑。

以上就是 Vue 中模板引用圖片的基本操作。無論是使用綁定語法還是 require() 方法，都可以很容易地將圖片引用到 Vue 模板中。