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

更新時(shí)間：2021年09月08日 16:45:22 作者：人在路途

這篇文章主要介紹了vue頁面圖片不顯示問題解決方案,本篇文章通過簡要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

在做新版組態(tài)界面的時(shí)候，用vue框架實(shí)現(xiàn)，在配置頁面圖片的時(shí)候發(fā)現(xiàn)有一張圖片明明頁面輸入的路徑是對(duì)的可是圖片就是不顯示出來

現(xiàn)象：

　　network頁面資源也不報(bào)錯(cuò),而且狀態(tài)碼竟然還是200，點(diǎn)preview里面又什么都沒有，后面一輸入，發(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://chabaoo.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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)
這篇文章主要介紹了詳解vue之自行實(shí)現(xiàn)派發(fā)與廣播(dispatch與broadcast)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-01-01
Vue 3中的異步操作管理示例分析
在現(xiàn)代Web應(yīng)用開發(fā)中,異步操作是常見的挑戰(zhàn),本文介紹了Vue3中管理多個(gè)異步操作的方法,幫助開發(fā)者提高編碼效率和應(yīng)用性能,感興趣的朋友跟隨小編一起看看吧
2024-09-09
Vue實(shí)現(xiàn)可移動(dòng)水平時(shí)間軸
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)可移動(dòng)水平時(shí)間軸，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
vue3實(shí)現(xiàn)手機(jī)上可拖拽元素的組件
這篇文章主要介紹了vue3實(shí)現(xiàn)手機(jī)上可拖拽元素的組件，用vue3實(shí)現(xiàn)一個(gè)可在手機(jī)上拖拽元素的組件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕邊緣
2022-09-09
vue 路由緩存路由嵌套路由守衛(wèi) 監(jiān)聽物理返回操作
這篇文章主要介紹了vue 路由緩存路由嵌套路由守衛(wèi) 監(jiān)聽物理返回操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-08-08
Vue3中使用styled-components的實(shí)現(xiàn)
本文主要介紹了Vue3中使用styled-components的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2024-05-05
vue點(diǎn)擊按鈕實(shí)現(xiàn)讓頁面的某一個(gè)元素全屏展示
這篇文章主要介紹了vue點(diǎn)擊按鈕實(shí)現(xiàn)讓頁面的某一個(gè)元素全屏展示，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
M1 pro芯片啟動(dòng)Vue項(xiàng)目的方法步驟
本文主要介紹了M1 pro芯片啟動(dòng)Vue項(xiàng)目的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
Vue中使用富文本編輯框的實(shí)踐與探索
本文詳細(xì)介紹了如何在Vue項(xiàng)目中集成和使用富文本編輯框,并分享了一些實(shí)踐經(jīng)驗(yàn),介紹了為什么需要富文本編輯框,Vue中常用的富文本編輯器,以及如何安裝、配置和使用Vue-Quill-Editor,本文還提供了一些基本的配置示例,幫助開發(fā)者在實(shí)際項(xiàng)目中根據(jù)需求進(jìn)行更多探索和定制
2024-10-10
一個(gè)Vue頁面的內(nèi)存泄露分析詳解
這篇文章主要介紹了一個(gè)Vue頁面的內(nèi)存泄露分析詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-06-06