在Vue中設置主圖通常有兩種方法：使用動態綁定屬性或者使用計算屬性。無論使用哪種方法，在開始之前都需要確保已經正確引入vue.js文件。

使用動態綁定屬性

動態綁定屬性是Vue中最常見的方法，以v-bind指令為例，其語法為v-bind:屬性名="表達式"，其中屬性名通常為組件的一個屬性，如src、alt、title等，而表達式則是需要綁定的數據。

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

以上代碼中，我們通過v-bind指令將標簽的src綁定到了data中定義的imgUrl屬性，因此標簽的src屬性會隨著imgUrl的值變化而變化。

使用計算屬性

另一種設置主圖的方法是使用計算屬性，它可以根據一些依賴狀態（例如當前的用戶角色）自動計算并返回一個值，而不是手動編寫一個方法。計算屬性可以通過computed關鍵字來定義，需要在computed對象中定義一個屬性，該屬性的getter方法將被用于計算圖片的src和對應的alt文本。

<template>
<img :src="src" :alt="alt">
</template>
<script>
export default {
data() {
return {
user: {
isAdmin: true,
gender: 'male'
}
}
},
computed: {
src() {
return this.user.isAdmin
? 'https://example.com/admin.jpg'
: 'https://example.com/user_' + this.user.gender + '.jpg'
},
alt() {
return this.user.isAdmin
? '管理員頭像'
: '普通用戶頭像'
}
}
}
</script>

以上代碼中，我們定義了兩個計算屬性：src和alt。src返回一個圖片的URL，根據當前用戶的isAdmin屬性來區分管理員和普通用戶，并獲取不同的頭像。alt返回一個說明圖片的文字，也根據isAdmin屬性來不同。

小結

無論使用哪種方法，設置主圖都需要確保img標簽的src屬性正確設置。動態綁定屬性可以根據數據狀態動態改變圖片的src，而計算屬性可以根據復雜的依賴狀態來自動計算返回值。使用動態綁定屬性更加簡單明了，適合簡單場景的設置，而使用計算屬性更加靈活，適用于復雜場景的設置。