vue頁面圖片不顯示問題解決方案

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

現象：

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

解決辦法：

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

　　　1、找到vue.config.js

　　　2、在module.exports下面的devServer裡面添加一個鍵

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

這句話的意思就是，webpack-dev-server 會使用當前的路徑作為請求的資源路徑

關於 contentBase，參考文章

https://www.jb51.net/article/222324.htm

靜態資源：

方法一：直接輸入路徑

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

方法二：使用 require

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

方法三：模塊化

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

使用：

js:

import Images from './assets/images'

html:

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

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