vue報錯找不到圖片的解決方法：1、修改設定文件，將絕對路徑改為相對路徑；2、將圖片作為模組載入進去，並將圖片放到static目錄下；3、將imageUrls引入回應的vue檔案中，解析引用即可。
本教學操作環境：windows7系統、vue3、Dell G3電腦。
vue報錯找不到圖片怎麼辦？
vue中圖片加載不出來的問題及解決
在使用vue開發專案的時候，經常會遇到的一個問題是：圖片加載不出來。以下是我總結的幾種圖片載入不出來的情況及解決辦法。
在vue webpack的專案中，專案打包之後的css和js的參考路徑是絕對路徑，專案部署之後會將靜態當成根目錄，就造成了檔案參考路徑的錯誤。
透過修改設定文件，將絕對路徑改為相對路徑。
具體操作如下：
1.vue-cli 3.0版本之前
設定config下面的index.js中bulid模組導出的路徑。因為index.html裡邊的內容都是透過script標籤引入的，而你的路徑不對，開啟肯定是空白的。先看一下預設的路徑。
module.exports = {
build: {
env: require('./prod.env'),
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/',
productionSourceMap: true,assetsPublicPath預設的是 ‘/' 也就是根目錄。而我們的index.html和static在同一級目錄下面。所以要改為 './ '
2.vue-cli 3.0版本之後
設定vue.config.js檔案
module.exports = {
// baseUrl:'./', // vue-cli3.3以下版本使用
publicPath:'./' // vue-cli3.3+新版本使用src裡邊router/index.js路由設定裡邊預設模式是hash，如果你改成了history模式的話，開啟也會是一片空白。所以改為hash或直接把模式配置刪除，讓它預設的就行 。
如果要使用history模式的話，需要你在服務端加上一個覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態資源，則應該返回一個index.html,這個頁面就是你app依賴頁面。
// mode: 'history' // 默认hash
：在專案編譯的過程中會被webpack處理解析為模組依賴，只支援相對路徑的形式，如< img src='./logo.png'>和background:url( ./logo.png),'./logo.png'是相對資源路徑，將有webpack解析為模組依賴。 ：在這個目錄下檔案不會被webpack處理,簡單就是說存放第三方檔案的地方，不會被webpack解析。他會直接被複製到最終的打包目錄(預設是dist/static)下。必須使用絕對路徑引用這些文件，這是透過config.js文件中的build.assetsPublic和build.assertsSubDirectory連結來確定的。任何放在static/中文件需要以絕對路徑的形式引用：/static[filename]。 1.將圖片作為模組載入進去
例如images:[{src:require('./1.png')},{src:require('./2.png') }]，這樣webpack就能解析。2.將圖片放到static目錄下
但必須寫成絕對路徑如images:[{src:”/static/1.png”},{ src:”/static/2.png”}]這樣圖片也會顯示出來，當然你也可以透過在webpack.base.config.js定義來縮短路徑的書寫長度。 簡化本機圖片載入的方法1.在static裡面新建一個imageUrls資料夾
2.填入imageUrls檔
{
'imageUrls': [
{
'image1': '/static/image/image1.png'
},
{
'image2': '/static/image/image2.png'
}
]
}#3.將imageUrls引入回應的vue檔案中，解析引用就行了
#import img from '../../../static/imageUrls/imageUrls.json'
export default {
data() {
return {
imageGroups: img.imageUrls
}
}
}vue.js影片教學》
以上是vue報錯找不到圖片怎麼辦的詳細內容。更多資訊請關注PHP中文網其他相關文章！
