vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404的解決
更新時(shí)間：2024年07月25日 08:43:19 作者：liuxi_happy
這篇文章主要介紹了vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue動(dòng)態(tài)顯示圖片報(bào)錯(cuò)404
<img :src="image"/>
當(dāng)我們動(dòng)態(tài)加載圖片的時(shí)候會(huì)出現(xiàn)如下圖錯(cuò)誤
1.第一種可能，是你寫了相對(duì)路徑引起的，你需要寫絕對(duì)路徑
image:'../assets/image/top10-1.png' 你需要改成具體路徑 image:'/src/assets/images/top10-1.png'
2.第二種解決方式你要使用require()
<img :src="require(images)"/>
3.第三種解決方式把圖片放在public目錄下面，但是這樣雖然解決了問題，使用webpack打包的時(shí)候不會(huì)把這里面的文件打包進(jìn)去。
4.如果你使用了ts 那么就無法使用require(),你可以使用import 把你的圖片路徑作為一個(gè)模塊引進(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 路徑出錯(cuò)
最近在Vue學(xué)習(xí)交流群里面發(fā)現(xiàn)很多小伙伴在想要在vue中顯示圖片，但是把圖片寫在data里面作為變量傳到模板中的時(shí)候卻發(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é)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue?指令與過濾器，本文通過案例代碼給大家詳細(xì)講解，給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后出現(xiàn)的問題
這篇文章主要介紹了vuejs項(xiàng)目打包之后的首屏加載優(yōu)化及打包之后可能出現(xiàn)的問題,需要的朋友可以參考下2018-04-04
這篇文章主要介紹了vue中$emit的用法詳解,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-08-08
vue 組件開發(fā)原理與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了vue 組件開發(fā)原理與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js組件開發(fā)的原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2019-11-11
基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件
這篇文章主要介紹了基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-04-04
vue?LogicFlow更多配置選項(xiàng)示例詳解
這篇文章主要為大家介紹了vue?LogicFlow更多配置選項(xiàng)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-01-01
前端開發(fā)的時(shí)候,在項(xiàng)目中引入組件以及使用是非常常見操作,下面這篇文章主要給大家介紹了關(guān)于Vue全局提示組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
VNode虛擬節(jié)點(diǎn)實(shí)例簡(jiǎn)析
這篇文章主要介紹了VNode虛擬節(jié)點(diǎn),結(jié)合實(shí)例形式分析了VNode虛擬節(jié)點(diǎn)的基本功能、原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了如何利用Vue實(shí)現(xiàn)輸入框@功能，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以學(xué)習(xí)一下2022-05-05
vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解
今天小編就為大家分享一篇vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09