很多初學者在使用Vue的過程中，可能會遇到一個問題，就是在使用Vue打包后，圖片無法正常顯示的情況。為了解決這個問題，我們需要對Vue中的圖片打包方式進行一定的了解。

首先，讓我們來看一下在Vue中如何引入圖片。我們可以在組件中以相對路徑的方式引入圖片，例如：

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

上述代碼中，我們使用了相對路徑的方式引入了logo.png這張圖片。但是，當我們運行npm run build進行打包后，在瀏覽器中訪問頁面時，頁面中的圖片卻顯示不了。那么問題究竟出在哪里呢？

其實，這是因為Vue在打包時，將圖片等靜態資源默認放置在了根目錄下的名為“static”的文件夾中，而不是和組件在同一個文件夾下的“assets”文件夾中。

為了讓打包后的頁面顯示出圖片，我們需要更改一下圖片的引用路徑。首先，我們需要在webpack的配置文件中添加一個url-loader的配置，如下所示：

module.exports = {
rules: [
{
test: /\.png$/,
loader: 'url-loader',
options: {
limit: 10000,
name: 'img/[name].[hash:8].[ext]'
}
}
]
}

上述代碼中，我們使用url-loader對png格式的圖片進行了處理，并指定了圖片大小超過10000時就不會被壓縮，然后將處理后的圖片放到img文件夾下，并使用8位的hash值作為圖片名稱的一部分。

接下來，我們需要修改組件中的圖片引用路徑，如下所示：

<template>
<img :src="logo">
</template>
<script>
export default {
data() {
return {
logo: require('../assets/logo.png')
}
}
}
</script>

上述代碼中，我們使用了require函數將圖片路徑改為相對路徑，然后將其賦值給組件的data屬性。

最后，我們需要修改一下webpack配置文件中的publicPath設置，讓webpack打包后的資源路徑指向相對路徑，而不是默認的絕對路徑。代碼如下：

module.exports = {
output: {
publicPath: './'
}
}

上述代碼中，我們將webpack輸出文件的路徑指向相對路徑./

通過上述步驟，我們就可以使用Vue打包后正常顯示圖片了。