vue頁面圖片不顯示問題解決方案
更新時間：2021年09月08日 16:45:22 作者：人在路途
這篇文章主要介紹了vue頁面圖片不顯示問題解決方案,本篇文章通過簡要的案例,講解了該項技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下
在做新版組態(tài)界面的時候，用vue框架實現(xiàn)，在配置頁面圖片的時候發(fā)現(xiàn)有一張圖片明明頁面輸入的路徑是對的可是圖片就是不顯示出來
現(xiàn)象：
network頁面資源也不報錯,而且狀態(tài)碼竟然還是200，點preview里面又什么都沒有，后面一輸入，發(fā)現(xiàn)隨便輸入什么字都是出現(xiàn)的200
解決辦法：
在webpack里面配置靜態(tài)資源的路徑
1、找到vue.config.js
2、在module.exports下面的devServer里面添加一個鍵
contentBase:path.join(_dirname,'src')
這句話的意思就是，webpack-dev-server 會使用當(dāng)前的路徑作為請求的資源路徑
關(guān)于 contentBase，參考文章
http://www.dbjr.com.cn/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'
html:
<img class="sys_logo" :src="Images.logoUrl" />
到此這篇關(guān)于vue頁面圖片不顯示問題解決方案的文章就介紹到這了,更多相關(guān)vue頁面圖片不顯示問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
在現(xiàn)代Web應(yīng)用開發(fā)中,異步操作是常見的挑戰(zhàn),本文介紹了Vue3中管理多個異步操作的方法,幫助開發(fā)者提高編碼效率和應(yīng)用性能,感興趣的朋友跟隨小編一起看看吧2024-09-09
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)可移動水平時間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要介紹了vue3實現(xiàn)手機上可拖拽元素的組件，用vue3實現(xiàn)一個可在手機上拖拽元素的組件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕邊緣2022-09-09
vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作
這篇文章主要介紹了vue 路由緩存 路由嵌套 路由守衛(wèi) 監(jiān)聽物理返回操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3中使用styled-components的實現(xiàn)
本文主要介紹了Vue3中使用styled-components的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
這篇文章主要介紹了vue點擊按鈕實現(xiàn)讓頁面的某一個元素全屏展示，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
本文主要介紹了M1 pro芯片啟動Vue項目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-11-11
本文詳細(xì)介紹了如何在Vue項目中集成和使用富文本編輯框,并分享了一些實踐經(jīng)驗,介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開發(fā)者在實際項目中根據(jù)需求進行更多探索和定制2024-10-10
這篇文章主要介紹了一個Vue頁面的內(nèi)存泄露分析詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06