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.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 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" />