vue頁(yè)面圖片不顯示問(wèn)題解決方案
在做新版組態(tài)界面的時(shí)候，用vue框架實(shí)現(xiàn)，在配置頁(yè)面圖片的時(shí)候發(fā)現(xiàn)有一張圖片明明頁(yè)面輸入的路徑是對(duì)的可是圖片就是不顯示出來(lái)
現(xiàn)象：
network頁(yè)面資源也不報(bào)錯(cuò),而且狀態(tài)碼竟然還是200，點(diǎn)preview里面又什么都沒(méi)有，后面一輸入，發(fā)現(xiàn)隨便輸入什么字都是出現(xiàn)的200
解決辦法：
在webpack里面配置靜態(tài)資源的路徑
1、找到vue.config.js
2、在module.exports下面的devServer里面添加一個(gè)鍵
contentBase:path.join(_dirname,'src')
這句話的意思就是，webpack-dev-server 會(huì)使用當(dāng)前的路徑作為請(qǐng)求的資源路徑
關(guān)于 contentBase，參考文章
http://m.fzitv.net/article/222324.htm
靜態(tài)資源：
方法一：直接輸入路徑
<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'
<img class="sys_logo" :src="Images.logoUrl" />
到此這篇關(guān)于vue頁(yè)面圖片不顯示問(wèn)題解決方案的文章就介紹到這了,更多相關(guān)vue頁(yè)面圖片不顯示問(wèn)題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
如果我們?cè)诿總€(gè)組件中去重復(fù)定義這些屬性和方法會(huì)使得項(xiàng)目出現(xiàn)代碼冗余并提高了維護(hù)難度，針對(duì)這種情況官方提供了Mixins特性，這時(shí)使用Vue mixins混入有很大好處，下面就介紹下Vue mixins混入使用方法，需要的朋友參考下吧2021-08-08
這篇文章主要介紹了vue組件內(nèi)部引入外部js文件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
本篇文章主要介紹了淺談vue.js中v-for循環(huán)渲染，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)
這篇文章主要介紹了vue循環(huán)中點(diǎn)擊選中再點(diǎn)擊取消(單選)的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-09-09
vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁(yè)面無(wú)響應(yīng)的情況
這篇文章主要介紹了vue2之響應(yīng)式雙向綁定,在對(duì)象或數(shù)組新增屬性頁(yè)面無(wú)響應(yīng)的情況及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
vue 的keep-alive緩存功能的實(shí)現(xiàn)
本篇文章主要介紹了vue 的keep-alive緩存功能的實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
vue中使用echarts制作圓環(huán)圖的實(shí)例代碼
這篇文章主要介紹了vue中使用echarts制作圓環(huán)圖的實(shí)例代碼，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07
vue雙向錨點(diǎn)實(shí)現(xiàn)過(guò)程簡(jiǎn)易版(scrollIntoView)
這篇文章主要介紹了vue雙向錨點(diǎn)實(shí)現(xiàn)過(guò)程簡(jiǎn)易版(scrollIntoView),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
vue 實(shí)現(xiàn)網(wǎng)頁(yè)截圖功能詳解
這篇文章主要介紹了通過(guò)vue實(shí)現(xiàn)網(wǎng)頁(yè)截圖的功能，有興趣的童鞋可以了解一下2021-11-11
vue實(shí)現(xiàn)登錄時(shí)的圖片驗(yàn)證碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)登錄時(shí)的圖片驗(yàn)證碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04