在網頁開發中，img標簽展示圖片的功能是必不可少的。而在Vue框架中，動態修改img標簽的src屬性也是一種很常見的需求。

在Vue中，我們可以使用v-bind指令來動態綁定img標簽的src屬性。例如：

<img v-bind:src="imgUrl">

在上述代碼中，imgUrl是一個Vue實例中的data屬性，它可以隨著數據的變化而自動更新img標簽的src屬性。

除此之外，Vue還提供了v-bind的縮寫語法，可以通過在屬性名之前添加一個冒號來簡化代碼。例如：

<img :src="imgUrl">

除了使用v-bind指令，我們還可以通過綁定計算屬性的方式來動態修改img標簽的src屬性。例如：

<img :src="computedImgUrl">
...
<script>
export default {
data() {
return {
imgName: 'mountain.jpg'
}
},
computed: {
computedImgUrl() {
return require(`@/assets/${this.imgName}`)
}
}
}
</script>

在上述代碼中，我們通過綁定computedImgUrl計算屬性來動態獲取圖片路徑。該計算屬性根據Vue實例中的imgName屬性來動態生成圖片的路徑，并返回該路徑作為img標簽的src屬性。

除了通過計算屬性的方式來動態修改img標簽的src屬性，我們還可以通過方法的方式來實現這個功能。例如：

<img :src="getImgUrl()">
...
<script>
export default {
data() {
return {
imgName: 'mountain.jpg'
}
},
methods: {
getImgUrl() {
return require(`@/assets/${this.imgName}`)
}
}
}
</script>

在上述代碼中，我們定義了一個getImgUrl方法，該方法根據Vue實例中的imgName屬性來動態生成圖片的路徑，并返回該路徑作為img標簽的src屬性。

需要注意的是，如果我們使用了動態生成的圖片路徑，那么Webpack會將這些圖片打包到編譯后的JavaScript文件中，因此這些圖片不會被緩存。為了避免這個問題，我們可以將動態生成的圖片路徑放在靜態文件夾中，然后使用相對路徑來引用這些圖片。例如：

<img :src="`/static/${imgName}`">

在上述代碼中，我們將動態生成的圖片路徑放在靜態文件夾中，并使用相對路徑來引用這些圖片。

總的來說，在Vue中動態修改img標簽的src屬性是一種很常見的需求，通過v-bind指令、計算屬性和方法這幾種方式都可以實現。需要注意的是，如果使用動態生成的圖片路徑，應使用相對路徑來引用這些圖片，避免Webpack打包這些圖片導致不被緩存的問題。