国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

首頁 web前端 Vue.js Vue3+TypeScript+Vite怎么使用require動態(tài)引入圖片等靜態(tài)資源

Vue3+TypeScript+Vite怎么使用require動態(tài)引入圖片等靜態(tài)資源

May 16, 2023 pm 08:40 PM
vue3 vite typescript

問題: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ò)誤提示如下:

Vue3+TypeScript+Vite怎么使用require動態(tài)引入圖片等靜態(tài)資源

解決

先說結(jié)論吧,在vite中不能使用require引入圖片資源因?yàn)檫@里的require貌似是webpack提供的一種加載能力,由于我們并非使用的webpack作為項(xiàng)目的構(gòu)建工具,我們使用的是Vite,因此這里必須轉(zhuǎn)用 Vite提供的靜態(tài)資源載入,vite關(guān)于這一部分的官方說明在這里,有興趣的小伙伴可以看官方的文檔:Vite中靜態(tài)資源處理;

Vue3+TypeScript+Vite怎么使用require動態(tài)引入圖片等靜態(tài)資源

這里我們在提煉的說明一下,官網(wǎng)上示例的用法如下:

const imgUrl = new URL(&#39;./img.png&#39;, import.meta.url).href
document.getElementById(&#39;hero-img&#39;).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)文章!

本站聲明
本文內(nèi)容由網(wǎng)友自發(fā)貢獻(xiàn),版權(quán)歸原作者所有,本站不承擔(dān)相應(yīng)法律責(zé)任。如您發(fā)現(xiàn)有涉嫌抄襲侵權(quán)的內(nèi)容,請聯(lián)系admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

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

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Clothoff.io

Clothoff.io

AI脫衣機(jī)

Video Face Swap

Video Face Swap

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

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費(fèi)的代碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

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

Dreamweaver CS6

Dreamweaver CS6

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

SublimeText3 Mac版

SublimeText3 Mac版

神級代碼編輯軟件(SublimeText3)

熱門話題

Laravel 教程
1601
29
PHP教程
1502
276
Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行SEO優(yōu)化 Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行SEO優(yōu)化 Sep 10, 2023 pm 07:33 PM

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ù) Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行前端安全防護(hù) Sep 09, 2023 pm 04:19 PM

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ù)加密和存儲 Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行數(shù)據(jù)加密和存儲 Sep 10, 2023 pm 04:51 PM

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)化 Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行跨域請求和網(wǎng)絡(luò)請求優(yōu)化 Sep 09, 2023 pm 04:40 PM

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)換功能 如何使用MySQL在TypeScript中實(shí)現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換功能 Jul 29, 2023 pm 02:17 PM

如何使用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和TypeScript開發(fā)高性能計(jì)算功能 Sep 20, 2023 am 11:21 AM

如何使用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的生命周期有哪些 vue3的生命周期有哪些 Feb 01, 2024 pm 04:33 PM

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+TS+Vite開發(fā)技巧:如何進(jìn)行微件和插件開發(fā) Vue3+TS+Vite開發(fā)技巧:如何進(jìn)行微件和插件開發(fā) Sep 10, 2023 pm 07:30 PM

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)行微件和

See all articles