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