Vue3+TypeScript+Vite怎么使用require動態(tài)引入圖片等靜態(tài)資源
May 16, 2023 pm 08:40 PM問題:Vue3+TypeScript+Vite的項(xiàng)目中如何使用require動態(tài)引入類似于圖片等靜態(tài)資源!
描述:今天在開發(fā)項(xiàng)目時(shí)(項(xiàng)目框架為Vue3+TypeScript+Vite)需要 動態(tài)引入靜態(tài)資源,也就是img標(biāo)簽的src屬性值為動態(tài)獲取,按照以往的做法直接是require引入即可,如下代碼:
<img class="demo" :src="require(`../../../assets/image/${item.img}`)" />
寫上后代碼波浪線報(bào)錯(cuò),報(bào)錯(cuò)提示:
找不到名稱 “require”。是否需要為節(jié)點(diǎn)安裝類型定義? 請嘗試使用
npm i --save-dev @types/node
。ts(2580)
在進(jìn)行了npm i --save-dev @types/node
安裝以及在TypeScript的配置文件 tsconfig.json
中添加了配置項(xiàng) "type":["node"]
后波浪線提示消失,但 瀏覽器的控制臺依然報(bào)錯(cuò),錯(cuò)誤提示如下:
解決:
先說結(jié)論吧,在vite中不能使用require引入圖片資源,因?yàn)檫@里的require貌似是webpack提供的一種加載能力,由于我們并非使用的webpack作為項(xiàng)目的構(gòu)建工具,我們使用的是Vite,因此這里必須轉(zhuǎn)用 Vite提供的靜態(tài)資源載入,vite關(guān)于這一部分的官方說明在這里,有興趣的小伙伴可以看官方的文檔:Vite中靜態(tài)資源處理;
這里我們在提煉的說明一下,官網(wǎng)上示例的用法如下:
const imgUrl = new URL('./img.png', import.meta.url).href document.getElementById('hero-img').src = imgUrl
可能不大好理解,簡單的說 new URL
一共接收兩個(gè)參數(shù),第一個(gè)參數(shù)即圖片的路徑,這里就是對應(yīng)require中的值,第二個(gè)參數(shù)是vite的一個(gè)全局變量,可以理解成直接寫死了 import.meta.url
,放到項(xiàng)目中大致如下:
<img class="t-desktop-icon" :src="getIcon(name)" />
在 template
的img上動態(tài)引入,getIcon方法如下
function getIcon(name: string) { return new URL(`../../../../assets/images/svg/${name}`, import.meta.url).href; }
這樣就可以在Vue3+TypeScript+Vite中動態(tài)引入圖片等靜態(tài)資源了
以上是Vue3+TypeScript+Vite怎么使用require動態(tài)引入圖片等靜態(tài)資源的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章!

熱AI工具

Undress AI Tool
免費(fèi)脫衣服圖片

Undresser.AI Undress
人工智能驅(qū)動的應(yīng)用程序,用于創(chuàng)建逼真的裸體照片

AI Clothes Remover
用于從照片中去除衣服的在線人工智能工具。

Clothoff.io
AI脫衣機(jī)

Video Face Swap
使用我們完全免費(fèi)的人工智能換臉工具輕松在任何視頻中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費(fèi)的代碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
功能強(qiáng)大的PHP集成開發(fā)環(huán)境

Dreamweaver CS6
視覺化網(wǎng)頁開發(fā)工具

SublimeText3 Mac版
神級代碼編輯軟件(SublimeText3)

Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行SEO優(yōu)化SEO(SearchEngineOptimization)是指通過優(yōu)化網(wǎng)站的結(jié)構(gòu)、內(nèi)容和關(guān)鍵詞等方面,使其在搜索引擎的排名更靠前,從而增加網(wǎng)站的流量和曝光度。在Vue3+TS+Vite等現(xiàn)代前端技術(shù)的開發(fā)中,如何進(jìn)行SEO優(yōu)化是一個(gè)很重要的問題。本文將介紹一些Vue3+TS+Vite開發(fā)的技巧和方法,幫

Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行前端安全防護(hù)隨著前端技術(shù)的不斷發(fā)展,越來越多的企業(yè)和個(gè)人開始使用Vue3+TS+Vite進(jìn)行前端開發(fā)。然而,隨之而來的安全風(fēng)險(xiǎn)也引起了人們的關(guān)注。在本文中,我們將探討一些常見的前端安全問題,并分享一些在Vue3+TS+Vite開發(fā)過程中如何進(jìn)行前端安全防護(hù)的技巧。輸入驗(yàn)證用戶的輸入往往是前端安全漏洞的主要來源之一。在

Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行數(shù)據(jù)加密和存儲隨著互聯(lián)網(wǎng)技術(shù)的快速發(fā)展,數(shù)據(jù)的安全性和隱私保護(hù)變得越來越重要。在Vue3+TS+Vite開發(fā)環(huán)境下,如何進(jìn)行數(shù)據(jù)加密和存儲,是每個(gè)開發(fā)人員都需要面對的問題。本文將介紹一些常用的數(shù)據(jù)加密和存儲的技巧,幫助開發(fā)人員提升應(yīng)用的安全性和用戶體驗(yàn)。一、數(shù)據(jù)加密前端數(shù)據(jù)加密前端加密是保護(hù)數(shù)據(jù)安全性的重要一環(huán)。常用

Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行跨域請求和網(wǎng)絡(luò)請求優(yōu)化引言:在前端開發(fā)中,網(wǎng)絡(luò)請求是非常常見的操作。如何優(yōu)化網(wǎng)絡(luò)請求以提高頁面加載速度和用戶體驗(yàn)是我們開發(fā)者需要思考的問題之一。同時(shí),對于一些需要向不同域名發(fā)送請求的場景,我們需要解決跨域問題。本文將介紹如何在Vue3+TS+Vite開發(fā)環(huán)境下進(jìn)行跨域請求以及網(wǎng)絡(luò)請求的優(yōu)化技巧。一、跨域請求解決方案使

如何使用MySQL在TypeScript中實(shí)現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換功能引言:在開發(fā)Web應(yīng)用程序時(shí),數(shù)據(jù)類型轉(zhuǎn)換是一個(gè)非常常見的需求。在處理數(shù)據(jù)庫中存儲的數(shù)據(jù)時(shí),特別是使用MySQL作為后端數(shù)據(jù)庫時(shí),我們經(jīng)常需要將查詢結(jié)果中的數(shù)據(jù)按照我們所需的類型進(jìn)行轉(zhuǎn)換。本文將介紹如何在TypeScript中利用MySQL實(shí)現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換的功能,并提供代碼示例。一、準(zhǔn)備工作:在開

如何使用Redis和TypeScript開發(fā)高性能計(jì)算功能概述:Redis是一個(gè)開源的內(nèi)存數(shù)據(jù)結(jié)構(gòu)存儲系統(tǒng),具有高性能和可擴(kuò)展性的特點(diǎn)。TypeScript是JavaScript的超集,提供了類型系統(tǒng)和更好的開發(fā)工具支持。結(jié)合Redis和TypeScript,我們可以開發(fā)出高效的計(jì)算功能來處理大數(shù)據(jù)集,并充分利用Redis的內(nèi)存存儲和計(jì)算能力。本文將介紹如何

vue3的生命周期:1、beforeCreate;2、created;3、beforeMount;4、mounted;5、beforeUpdate;6、updated;7、beforeDestroy;8、destroyed;9、activated;10、deactivated;11、errorCaptured;12 、getDerivedStateFromProps 等等

Vue3是Vue.js最新的版本,它引入了許多新的特性和改進(jìn),使得開發(fā)者們能夠更加高效地構(gòu)建靈活的Web應(yīng)用程序。在Vue3中,TypeScript(TS)可以與Vue無縫集成,為我們提供了強(qiáng)大的類型檢查功能。而Vite是一個(gè)輕量級的,基于ES模塊的,開發(fā)工具,它具有快速的冷啟動時(shí)間和快速的熱模塊更新。本文將為你介紹如何使用Vue3、TS和Vite進(jìn)行微件和
