Vue動(dòng)態(tài)設(shè)置圖片時(shí)src不生效的原因及解決方法
原因分析
在vue項(xiàng)目中動(dòng)態(tài)設(shè)置img的src時(shí),圖片會(huì)加載失敗。我們可以先看個(gè)例子。
<template> <div> <h1>動(dòng)態(tài)設(shè)置圖片</h1> <div> <h5>圖片一</h5> <img :src=" logoFlag === 'vue' ? '../assets/vue-logo.png' : '../assets/react-logo.png' " /> <div> <button @click="changeLogo">切換</button> </div> <h5>圖片二</h5> <img :src="imgUrl" /> </div> </div> </template> <script> export default { name: "ImgTest", data() { return { logoFlag: "vue", imgUrl: "../assets/vue-logo.png", }; }, methods: { changeLogo() { this.logoFlag = this.logoFlag === "vue" ? "react" : "vue"; }, }, }; </script> <style scoped> img { width: 50px; height: 50px; } </style>
由結(jié)果可以看出圖片加載失敗。
查看elements之后會(huì)發(fā)現(xiàn),src被當(dāng)做靜態(tài)資源處理了,并沒(méi)有進(jìn)行編譯。
解決方法
為了解決動(dòng)態(tài)的src沒(méi)有進(jìn)行編譯的問(wèn)題,我們可以使用require引入圖片。
<template> <div> <h1>動(dòng)態(tài)設(shè)置圖片</h1> <div> <h5>圖片一</h5> <img :src=" logoFlag === 'vue' ? require('../assets/vue-logo.png') : require('../assets/react-logo.png') " /> <div> <button @click="changeLogo">切換</button> </div> <h5>圖片二</h5> <img :src="imgUrl" /> </div> </div> </template> <script> export default { name: "ImgTest", data() { return { logoFlag: "vue", imgUrl: require("../assets/vue-logo.png"), }; }, methods: { changeLogo() { this.logoFlag = this.logoFlag === "vue" ? "react" : "vue"; }, }, }; </script> <style scoped> img { width: 50px; height: 50px; } </style>
可以看到使用require引入圖片之后,圖片就可以正常加載出來(lái)了。
import和require的區(qū)別
require是在運(yùn)行時(shí)加載,而import是編譯時(shí)加載;
如果希望使用import引入圖片就需要提前導(dǎo)入圖片。
<template> <div> <h1>動(dòng)態(tài)設(shè)置圖片</h1> <div> <h5>圖片一</h5> <img :src=" logoFlag === 'vue' ? require('../assets/vue-logo.png') : require('../assets/react-logo.png') " /> <div> <button @click="changeLogo">切換</button> </div> <h5>圖片二</h5> <img :src="imgUrl" /> </div> </div> </template> <script> import reactLogo from "../assets/react-logo.png"; export default { name: "ImgTest", data() { return { logoFlag: "vue", imgUrl:reactLogo, }; }, methods: { changeLogo() { this.logoFlag = this.logoFlag === "vue" ? "react" : "vue"; }, }, }; </script> <style scoped> img { width: 50px; height: 50px; } </style>
另外require和import另外的區(qū)別:
require是CommonJs/AMD規(guī)范,而import是ESMAScript6+規(guī)范。
到此這篇關(guān)于Vue動(dòng)態(tài)設(shè)置圖片時(shí)src不生效的原因及解決方法的文章就介紹到這了,更多相關(guān)Vue動(dòng)態(tài)設(shè)置圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- 關(guān)于Vue中img動(dòng)態(tài)拼接src圖片地址的問(wèn)題
- vue動(dòng)態(tài)加載本地圖片的處理方法
- Vue動(dòng)態(tài)加載圖片在跨域時(shí)無(wú)法顯示的問(wèn)題及解決方法
- 解決Vue動(dòng)態(tài)加載本地圖片問(wèn)題
- vue src動(dòng)態(tài)加載請(qǐng)求獲取圖片的方法
- vue動(dòng)態(tài)改變背景圖片demo分享
- vue 動(dòng)態(tài)綁定背景圖片的方法
- vue中如何動(dòng)態(tài)綁定圖片,vue中通過(guò)data返回圖片路徑的方法
- 基于vue 動(dòng)態(tài)加載圖片src的解決方法
相關(guān)文章
vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決
這篇文章主要介紹了vuex通過(guò)getters訪問(wèn)數(shù)據(jù)為undefined問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue實(shí)現(xiàn)批量注冊(cè)全局組件的示例代碼
在項(xiàng)目開(kāi)發(fā)中,我們經(jīng)常會(huì)封裝一些全局組件,然后在入口文件中統(tǒng)一導(dǎo)入,所以本文主要為大家詳細(xì)介紹了Vue如何批量注冊(cè)全局組件,感興趣的小伙伴可以了解下2024-01-01vue-router(this.$router)如何在新窗口打開(kāi)路由跳轉(zhuǎn)頁(yè)面
這篇文章主要介紹了vue-router(this.$router)如何在新窗口打開(kāi)路由跳轉(zhuǎn)頁(yè)面問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12如何在基于vue-cli的項(xiàng)目自定義打包環(huán)境
本篇文章主要介紹了在基于vue-cli的項(xiàng)目自定義打包環(huán)境,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題的解決
這篇文章主要介紹了使用vue-aplayer插件時(shí)出現(xiàn)的問(wèn)題的解決,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問(wèn)題
今天小編就為大家分享一篇淺談ElementUI中switch回調(diào)函數(shù)change的參數(shù)問(wèn)題,具有很好的價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽(tīng)
本文主要介紹了vue中實(shí)現(xiàn)全屏以及對(duì)退出全屏的監(jiān)聽(tīng),文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-07-07在vue中使用vue-echarts-v3的實(shí)例代碼
這篇文章主要介紹了在vue中使用vue-echarts-v3的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09