vue如何通過(guò)src引用assets中的圖片
更新時(shí)間：2022年03月26日 11:36:55 作者：maidu_xbd
這篇文章主要介紹了vue如何通過(guò)src引用assets中的圖片，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue:src引用assets的圖片
導(dǎo)入圖片并在data中聲明
<script>
import backImg from "../../assets/images/backimg.jpg";?
export default {
? data() {
? ? return {
? ? backImg: backImg,
? ? };
? }?
</script>使用
<img :src="backImg" ?/>
vue引入圖片方式
對(duì)于靜態(tài)的img,正常引入即可
<img src="@/assets/img/login/user.png"> // 可以使用@
當(dāng)使用模板綁定src時(shí)
// 不可以使用@，無(wú)法解析；也無(wú)法找到assets目錄 <img :src="@/assets/img/login/user.png">?
方式1：
// 將圖片放到static目錄下 <img :src="'../../static/img/login/user.png'">?
方法2：
在data中require()進(jìn)來(lái)：
// html
<img :src="img">?
// data
img: require('@/assets/img/login/user.png')方法3：import進(jìn)來(lái)
// html <img :src="img">? // script import img from '@/assets/img/login/user.png' // data img: img
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue中使用詞云圖的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
本篇文章主要介紹了詳解Vue應(yīng)用部署到服務(wù)器的正確方式，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。2017-07-07
vue3深入學(xué)習(xí)?nextTick和historyApiFallback
這篇文章主要介紹了vue3深入學(xué)習(xí)?nextTick和historyApiFallback，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下2022-08-08
這篇文章主要介紹了vue elementui上傳圖片限制格式、大小和尺寸方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了深入理解vue的使用，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境
這篇文章主要為大家介紹了Vue3中使用pnpm搭建monorepo開(kāi)發(fā)環(huán)境示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶體驗(yàn)至關(guān)重要,而提供簡(jiǎn)單易用的復(fù)制功能是改善用戶體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下2023-11-11
這篇文章主要介紹了淺談vuex actions和mutation的異曲同工 ，詳細(xì)的介紹了actions和mutation的使用和區(qū)別，非常具有實(shí)用價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
vue動(dòng)態(tài)綁定v-model屬性名方式
這篇文章主要介紹了vue動(dòng)態(tài)綁定v-model屬性名方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
前端vue+element使用SM4國(guó)密加密解密的詳細(xì)實(shí)例
國(guó)密即國(guó)家密碼局認(rèn)定的國(guó)產(chǎn)密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關(guān)于前端vue+element使用SM4國(guó)密加密解密的相關(guān)資料,需要的朋友可以參考下2023-03-03