在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，而计算属性可以根据复杂的依赖状态来自动计算返回值。使用动态绑定属性更加简单明了，适合简单场景的设置，而使用计算属性更加灵活，适用于复杂场景的设置。