在 Vue 中，我們常常需要在模板中使用圖片，比如在 img 標(biāo)簽中使用。通常情況下，我們會把圖片放在一個 assets 文件夾中，然后使用相對路徑引用。下面是一個例子：

<img src="./assets/logo.png">

其中，"./assets/logo.png" 表示圖片的相對路徑。這種方式有一個問題，就是當(dāng)項(xiàng)目結(jié)構(gòu)發(fā)生變化時，這些相對路徑也需要相應(yīng)地進(jìn)行修改，非常不方便。

為了解決這個問題，Vue 提供了一個更好的方式，即使用 require() 函數(shù)來引用圖片。使用這種方式，我們可以直接從 assets 文件夾中引用圖片，而不用擔(dān)心相對路徑的問題。下面是一個例子：

<img :src="require('@/assets/logo.png')">

其中，"@/" 表示 src 文件夾的根目錄，即項(xiàng)目的根目錄。使用 require() 函數(shù)引用圖片時，需要在路徑前面加上“~”，表示鏈接的是一個模塊。這樣做的好處是，當(dāng)項(xiàng)目的文件結(jié)構(gòu)發(fā)生變化時，我們只需要修改 Webpack 的配置文件，而不用修改代碼中的相對路徑。

需要注意的是，使用 require() 函數(shù)引用圖片時，圖片會被打包到最終的 JavaScript 文件中，因此需要注意圖片的大小問題。如果圖片過大，會導(dǎo)致 JavaScript 文件變得非常龐大，對頁面加載速度和用戶體驗(yàn)都會有很大的影響。