在做新版組態介面的時候，用框架實現，在配置頁面圖片的時候發現有一張圖片明明頁面輸入的路徑是對的可是圖片就是不顯示出來

現象：

　　network頁面資源也不報錯,而且狀態碼竟然還是200，點preview裡面又什麼都沒有，後面一輸入，發現隨便輸入什麼字都是出現的200

解決辦法：

　　在webpack裡面配置靜態資源的路徑

　　　1、找到vue.config.

　　　2、在module.e客棧xports下面的devServer裡面新增一個鍵

contentBase:path.join(_dirname,cPMAo'src')

這句話的意思就是，webpack-dev-server 會使用當前的路徑cPMAo

關於 contentBase，參考文章

https://www.jianshu.com/p/e547fb9747e0

靜態資源：

方法一：直接輸入路徑

<img class="sys_logo" src="./assets/images/top-logo.png"/>

方法二：使用 require

import logoUrl  from './top-logo.png'
const Images = {
    logoUrl
}
export default Images

方法三：模組化

import lowww.cppcns.comgoUrl  from './top-logo.png'
const Images = {
    logoUrl
}
export default Images

使用：

js:

import Images from './assets/images'

<img class="sys_logo" :src="Images.logoUrl" />

到此這篇關於vue頁面圖片不顯示問題解決方案的文章就介紹到這了,更多相關vue頁面圖片不顯示問題內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！