Vue3使用src動(dòng)態(tài)引入本地圖片的詳細(xì)步驟
1. vue-cli搭建的項(xiàng)目
在項(xiàng)目中我們想要?jiǎng)討B(tài)引入本地圖片的時(shí)候,(注意這是在cli搭建的,vite里面沒(méi)有require(),vite里面需要封裝個(gè)工具)
- 通過(guò)v-bind動(dòng)態(tài)綁定
- 通過(guò)的require引入
require作用
- 用于引入模板、JSON、或本地文件
下面這種require
直接包裹全部路徑是可以的,但是我在想感覺(jué)不太優(yōu)雅
想直接在src
里用require(item.imageActive)
這樣思路是沒(méi)有錯(cuò)的,但是require
是引入路徑這里我們需要給它拼接上路徑(直接進(jìn)行紅字部分是錯(cuò)誤的)
我們需要給它拼接一下,一定是不能直接傳入變量,不然無(wú)法解析
這樣就可以啦
不能直接require(item.path)
原因:
參考資料: assets:在項(xiàng)目編譯的過(guò)程中會(huì)被webpack處理解析為模塊依賴,只支持相對(duì)路徑的形式,加載圖片模塊通過(guò)webpack
的url-loader
加載器來(lái)實(shí)現(xiàn),url-loader
是解析不了動(dòng)態(tài)綁定的src的導(dǎo)致最終顯示的地址是未處理的地址,因此動(dòng)態(tài)綁定src
時(shí)要通過(guò)加載模塊的方式去加載這個(gè)圖片 使用require(“ ”)
具體的話我現(xiàn)在還不是特別理解
還有vue-cli下assets和static文件夾的區(qū)別
(這個(gè)地方后面會(huì)去學(xué)習(xí)一下,我覺(jué)得要學(xué)一下webpack(個(gè)人拙見(jiàn),我還不太了解QAQ))
2.vite搭建的項(xiàng)目動(dòng)態(tài)引入本地圖片
由于vite里面沒(méi)有require(), 所以需要封裝個(gè)工具
如下面這種工具(codewhy老師封裝的,why老師yyds)再在引用一下就可以了
export const getAssetURL = (image) => { // 參數(shù)一: 相對(duì)路徑 // 參數(shù)二: 當(dāng)前路徑的URL return new URL(`../assets/img/${image}`, import.meta.url).href }
完成
補(bǔ)充:vue3加載動(dòng)態(tài)圖片
一、動(dòng)態(tài)加載圖片
使用new URL(url, import.meta.url)
<template> ? ? <div class="home"> ? ? ? ? <img :src="getImageUrl()" alt="" /> ? ? </div> </template> <script lang="ts"> export default { ? ? name: 'HomeIndex', ? ? setup() { ? ? ? ? const getImageUrl = () => { ? ? ? ? ?? ?// 里面可以根據(jù)需求寫(xiě)邏輯 ? ? ? ? ? ? return new URL('../assets/img/home/container_bg.png', import.meta.url).href; ? ? ? ? }; ? ? ? ? return { getImageUrl }; ? ? }, }; </script>
二、動(dòng)態(tài)加載背景圖
2.1 style中設(shè)置
<template> ? ? <div ? ? ? ? class="container" ? ? ? ? :style="{ ? ? ? ? ? ? background: 'url(' + getAssetsFile(true) + ') no-repeat', ? ? ? ? ? ? backgroundSize: '100% 100%', ? ? ? ? }" ? ? ></div> </template> <script lang="ts"> export default { ? ? name: 'HomeIndex', ? ? setup() { ? ? ? ? const getAssetsFile = (isAlarm: boolean) => { ? ? ? ? ? ? const url = isAlarm ? ? ? ? ? ? ? ? ? '../assets/img/monitor_alarm_bg.png' ? ? ? ? ? ? ? ? : '../assets/img/monitor_bg.png'; ? ? ? ? ? ? return new URL(url, import.meta.url).href; ? ? ? ? }; ? ? ? ? return { getAssetsFile }; ? ? }, }; </script> <style lang="scss"> .container { ? ? width: 300px; ? ? height: 100px; } </style>
2.2 修改class
<template> <div :class="['container', isAlarm ? 'monitor_alarm' : 'monitor_normal']"></div> </template> <script lang="ts"> import { ref } from 'vue'; export default { name: 'HomeIndex', setup() { const isAlarm = ref(true); const getAssetsFile = (isAlarm: boolean) => { const url = isAlarm ? '../assets/img/monitor_alarm_bg.png' : '../assets/img/monitor_bg.png'; return new URL(url, import.meta.url).href; }; return { getAssetsFile, isAlarm }; }, }; </script> <style lang="scss"> .container { width: 300px; height: 100px; } .monitor_normal { background: url(@/assets/img/monitor_bg.png) no-repeat; background-size: 100% 100%; } .monitor_alarm { background: url(@/assets/img/monitor_alarm_bg.png) no-repeat; background-size: 100% 100%; } </style>
總結(jié)
到此這篇關(guān)于Vue3使用src動(dòng)態(tài)引入本地圖片的文章就介紹到這了,更多相關(guān)Vue3 src動(dòng)態(tài)引入本地圖片內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況
這篇文章主要介紹了解決Vue keep-alive 調(diào)用 $destory() 頁(yè)面不再被緩存的情況,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10Vue POST請(qǐng)求頭'Content-Type':'application/j
這篇文章主要介紹了Vue POST請(qǐng)求頭'Content-Type':'application/json;',data上傳過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03Vue組件間通信方法總結(jié)(父子組件、兄弟組件及祖先后代組件間)
這篇文章主要給大家介紹了關(guān)于Vue組件間通信的相關(guān)資料,其中包括父子組件、兄弟組件及祖先后代組件間的通信,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04vue.js路由mode配置之去掉url上默認(rèn)的#方法
今天小編就為大家分享一篇vue.js路由mode配置之去掉url上默認(rèn)的#方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù)
這篇文章主要介紹了Vue中的父子組件通訊以及使用sync同步父子組件數(shù)據(jù),對(duì)vue感興趣的同學(xué),可以參考下2021-04-04