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