vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404的解決
vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404
<img :src="image"/>
當(dāng)我們動(dòng)態(tài)加載圖片的時(shí)候會(huì)出現(xiàn)如下圖錯(cuò)誤
1.第一種可能，是你寫(xiě)了相對(duì)路徑引起的，你需要寫(xiě)絕對(duì)路徑
image:'../assets/image/top10-1.png' 你需要改成具體路徑 image:'/src/assets/images/top10-1.png'
2.第二種解決方式你要使用require()
<img :src="require(images)"/>
3.第三種解決方式把圖片放在public目錄下面，但是這樣雖然解決了問(wèn)題，使用webpack打包的時(shí)候不會(huì)把這里面的文件打包進(jìn)去。
4.如果你使用了ts 那么就無(wú)法使用require(),你可以使用import 把你的圖片路徑作為一個(gè)模塊引進(jìn)來(lái)使用
<template>
<img :src="images"/>
</template>
<script>
import image from '../assets/image/top10-1.png'
export default{
data(){
return {
images:image
}
}
}
</script>
vue.js圖片不顯示 | 圖片資引用 | img src 路徑出錯(cuò)
最近在Vue學(xué)習(xí)交流群里面發(fā)現(xiàn)很多小伙伴在想要在vue中顯示圖片，但是把圖片寫(xiě)在data里面作為變量傳到模板中的時(shí)候卻發(fā)現(xiàn)圖片出不了，以為是圖片路徑的問(wèn)題，查了半天還是出不來(lái)。
解決方法
方案1：使用require將圖片進(jìn)入
寫(xiě)法如下：
logo: require('../asset/admin/logo.png')然后再模板中：
<img :src="logo">
就可以了。
方案2：把圖片放在static文件夾中
如下所示：
然后再data里面直接這樣寫(xiě)
logo: '../static/images/logo.png'
就可以直接使用了。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式小結(jié)
這篇文章主要介紹了Vue指令v-for遍歷輸出JavaScript數(shù)組及json對(duì)象的常見(jiàn)方式,結(jié)合實(shí)例形式總結(jié)分析了vue.js使用v-for指令遍歷輸出js數(shù)組與json對(duì)象的常見(jiàn)操作技巧,需要的朋友可以參考下2019-02-02
Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)
這篇文章主要介紹了Vue源碼解析之?dāng)?shù)組變異的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
今天小編就為大家分享一篇vue遍歷對(duì)象中的數(shù)組取值示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
Vue el-upload單圖片上傳功能實(shí)現(xiàn)
這篇文章主要介紹了Vue el-upload單圖片上傳功能實(shí)現(xiàn),本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-11-11
如何使用el-cascader組件寫(xiě)下拉級(jí)聯(lián)多選及全選功能
這篇文章主要介紹了如何使用el-cascader組件寫(xiě)下拉級(jí)聯(lián)多選及全選功能,因?yàn)槭怯腥x的功能,所以不能直接使用el-cascader組件,?而是選擇使用el-select組件,?在此組件內(nèi)部使用el-cascader-panel級(jí)聯(lián)面板,感興趣的朋友跟隨小編一起看看吧2024-03-03
Vue項(xiàng)目中vue.config.js常用配置項(xiàng)詳解
在 Vue CLI 創(chuàng)建的項(xiàng)目中,vue.config.js 是核心配置文件,用于定制化構(gòu)建、開(kāi)發(fā)和部署流程,本文詳細(xì)解析了該文件的常用配置項(xiàng),并結(jié)合代碼示例和表格說(shuō)明,幫助開(kāi)發(fā)者高效管理項(xiàng)目配置,提升開(kāi)發(fā)體驗(yàn),需要的朋友可以參考下2025-04-04
element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題
這篇文章主要介紹了element?ui?watch?el-input賦值之后無(wú)法刪除或修改問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的方法示例
這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目打包自動(dòng)更新版本號(hào)且自動(dòng)刷新緩存的相關(guān)資料,文中通過(guò)代碼及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-11-11
這篇文章主要介紹了詳解Nuxt.js中使用Element-UI填坑，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
這篇文章主要介紹了vue 之 css module的使用方法，css module目的為所有類名重新生成類名，有效避開(kāi)了css權(quán)重和類名重復(fù)的問(wèn)題，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2018-12-12