如何解決vue打包後靜態資源圖片失效的問題

下面我就為大家分享一篇解決vue打包之後靜態資源圖片失效的問題，具有很好的參考價值，希望對大家有幫助。

1、問題描述

在專案開發中,當我們透過npm run build打包之後將檔案放在伺服器上時通常會出現圖片失效問題,控制台中提示某個圖片沒有找到（404錯誤），這些圖片可以是以src引入的圖片， 也可以是css中定義的背景圖片。圖片能否顯示與你的靜態資源文件存在位置和引入的路徑直接相關，以下是我的其中一個項目的文件存放以及路徑書寫方式！

2、解決方法之一

靜態資源static存放位置放在src目錄下

 

你可能會問為什麼要放在src目錄下？放在跟src同級目錄下不可以嗎？好吧，一開始我也是放在src同級目錄下，但是在某個css檔案中引入背景圖片的時候打包之後圖片失效，我是這樣引入的

 

實作證明這個寫法是錯的，這個會在你打包的時候直接抱一大堆錯（如css-loader錯誤），連專案都跑不起來。

於是我用下面的寫法：

# 

這種寫法也是不可以的，原因是你的靜態資源檔案static不在src目錄，而在vue中src目錄是相對根目錄是src目錄，所以如果你想用上面的寫法，你必須要把static放在src目錄下。如上圖一圖二

注意：不能把static/images/user.png寫成 /static/images/user.png，否則圖片還是失效。

以上是關於檔案存放位置以及css中引入圖片問題，如果是透過img標籤引入圖片的話，相對簡單，直接寫絕對地址就行了，並且靜態資源static資料夾的位置可以在src裡面，也可以放在與src同級下，但為了不出現上面情況，放在src裡面即可！

img引入圖片：

 

以上是解決圖片失效問題的方法，當然，如果要把static靜態資源目錄放在與src同級目錄下，也是有解決方法，例如透過匯入圖片的方式（本人未實踐），可以自行嘗試！

上面是我整理給大家的，希望今後對大家有幫助。

相關文章：

在使用vue中實現本機靜態圖片路徑（詳細教學）

根據webpack配置中導致字體圖標無法顯示的解決方法（詳細教學）

React中使用BootStrap使用者體驗框架（詳細教學）

以上是如何解決vue打包後靜態資源圖片失效的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！