在Vue中動(dòng)態(tài)引入圖片為什么要用require

2年前作者：song854601134分類：Toy博客閱讀(27)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了在Vue中動(dòng)態(tài)引入圖片為什么要用require。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

靜態(tài)資源和動(dòng)態(tài)資源

靜態(tài)資源
- 動(dòng)態(tài)的添加src
動(dòng)態(tài)資源
- 我們通過網(wǎng)絡(luò)請(qǐng)求從后端獲取的資源

動(dòng)態(tài)的添加src會(huì)被當(dāng)成靜態(tài)資源

動(dòng)態(tài)的添加src最終會(huì)被打包成：
在Vue中動(dòng)態(tài)引入圖片為什么要用require,前端學(xué)習(xí)總結(jié),vue.js,前端,javascript

動(dòng)態(tài)的添加圖片最會(huì)會(huì)被編譯成一個(gè)靜態(tài)的字符串，然后再瀏覽器運(yùn)行中會(huì)去項(xiàng)目中查找這個(gè)資源，

靜態(tài)資源編譯

默認(rèn)情況下src目錄的所有文件都會(huì)打包一個(gè)新的文件名，然后編譯后靜態(tài)引入的地址就是打包后的靜態(tài)地址。所以就可以正確的應(yīng)用到這些資源了
在Vue中動(dòng)態(tài)引入圖片為什么要用require,前端學(xué)習(xí)總結(jié),vue.js,前端,javascript

當(dāng)我們使用require引入一張圖片的時(shí)候，webpack會(huì)將這個(gè)圖片當(dāng)成一個(gè)模塊，并根據(jù)配置文件的配置然后進(jìn)行打包，最終返回一個(gè)大包的地址
在Vue中動(dòng)態(tài)引入圖片為什么要用require,前端學(xué)習(xí)總結(jié),vue.js,前端,javascript

動(dòng)態(tài)引入一個(gè)圖片的時(shí)候，它其實(shí)是一個(gè)變量，webpack會(huì)根據(jù)v-bind的一個(gè)命令去解析SRC后面的值，并不會(huì)通過require引入資源的對(duì)象

vue3中使用new URL動(dòng)態(tài)引入

js的相對(duì)路徑和絕對(duì)路徑的區(qū)別寫法就是前面有沒有/

new URL(url)
new URL(url, base)

url：一個(gè)表示絕對(duì)或 相對(duì) URL 的 DOMString 或任何具有字符串化方法的對(duì)象，如果 url 是相對(duì) URL，則會(huì)將 base 用作基準(zhǔn) URL。如果 url 是絕對(duì) URL，則無(wú)論參數(shù) base 是否存在，都將被忽略。

base可選：一個(gè)表示基準(zhǔn) URL 的字符串，當(dāng) url 為相對(duì) URL 時(shí)，它才會(huì)生效。如果未指定，它默認(rèn)為 undefined。

vue2和vue3配置別名后都可以在css中都可以使用@別名，但是vue3動(dòng)態(tài)引入圖片時(shí)候只能使用new URL,因?yàn)関ue3使用的是vite，而require是屬于webpack的函數(shù)。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-641994.html

到了這里，關(guān)于在Vue中動(dòng)態(tài)引入圖片為什么要用require的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來(lái)自互聯(lián)網(wǎng)用戶投稿，該文觀點(diǎn)僅代表作者本人，不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載，請(qǐng)注明出處：如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符，請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋，一經(jīng)查實(shí)，立即刪除！

分享到：

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

為什么要用開源容器？
說(shuō)到開源容器，大家首先想起來(lái)的應(yīng)該是Docker吧，那么我們就以Docker來(lái)從個(gè)人角度理解一下為什么要用開源容器。通常都會(huì)說(shuō)Docker開源容器，但是Docker 實(shí)際上是一個(gè)開源的應(yīng)用容器引擎。Docker是一個(gè)基于輕量級(jí)虛擬化技術(shù)的容器，整個(gè)項(xiàng)目基于Go語(yǔ)言開發(fā)，并采用了Apache 2
2024年04月16日
瀏覽(60)
為什么要用虛擬 DOM?
虛擬DOM（Virtual DOM）是一種將應(yīng)用程序的狀態(tài)（state）與DOM分離的技術(shù)。它是一個(gè)JavaScript對(duì)象，它的結(jié)構(gòu)類似于實(shí)際DOM元素的結(jié)構(gòu)。使用虛擬DOM的目的是在減少DOM操作的數(shù)量的同時(shí)，提高應(yīng)用程序的性能和響應(yīng)速度。當(dāng)應(yīng)用程序的狀態(tài)發(fā)生變化時(shí)，使用虛擬DOM可以計(jì)算出需要
2024年02月01日
瀏覽(23)
低代碼是什么意思？企業(yè)為什么要用低代碼平臺(tái)？
低代碼是什么意思？企業(yè)為什么要用低代碼平臺(tái)？這兩個(gè)問題似乎困擾了很多人，總有粉絲跟小簡(jiǎn)抱怨，一天到晚念叨低代碼，倒是來(lái)個(gè)人解釋清楚?。?來(lái)了，這次一文讓你全明白。在此之前，先了解什么是云計(jì)算。 “云” ：指的就是互聯(lián)網(wǎng)，因?yàn)橹盎ヂ?lián)網(wǎng)（Internet）
2024年02月07日
瀏覽(24)
2023-06-03：redis中pipeline有什么好處，為什么要用 pipeline？
2023-06-03：redis中pipeline有什么好處，為什么要用 pipeline？答案2023-06-03： Redis客戶端執(zhí)行一條命令通常包括以下四個(gè)階段： 1.發(fā)送命令：客戶端將要執(zhí)行的命令發(fā)送到Redis服務(wù)器。 2.命令排隊(duì)：Redis服務(wù)器將收到的命令放入隊(duì)列中，按照先進(jìn)先出（FIFO）的原則等待執(zhí)行。 3.命令
2024年02月07日
瀏覽(17)
bash腳本if語(yǔ)句比較為什么要用x
如下進(jìn)行PCIe設(shè)備的檢測(cè)和計(jì)數(shù)，并執(zhí)行重啟操作的例子代碼：在給定的代碼片段中，使用 x 是為了避免在比較時(shí)出現(xiàn)空字符串的問題。這是一種常見的技巧，用于確保比較操作的準(zhǔn)確性。在這個(gè)特定的語(yǔ)句中， x${devIDFunc0} 是用來(lái)檢查變量 devIDFunc0 是否為空字符串。通過在變
2024年02月08日
瀏覽(19)
為什么爬蟲要用高匿代理IP？高匿代理IP有什么優(yōu)點(diǎn)
只要搜代理IP，度娘就能給我們跳出很多品牌的推廣，比如我們青果網(wǎng)路的。正如你所看到的，我們廠商很多宣傳用詞都會(huì)用到高匿這2字。這是為什么呢？高匿IP有那么重要嗎？這就需要我們從HTTP代理應(yīng)用最多最廣的：爬蟲數(shù)據(jù)采集來(lái)說(shuō)。爬蟲數(shù)據(jù)采集的時(shí)候，非常容易遇
2024年02月12日
瀏覽(22)
$模型\視圖一般步驟：為什么經(jīng)常要用“選擇模型”QItemSelectionModel？$
模型\視圖一般步驟：為什么經(jīng)常要用“選擇模型”QItemSelectionModel？
???????????????????????? ???????????????????????????????? 一、“使用視圖”一般的步驟： //1. 創(chuàng)建? 模型(這里是數(shù)據(jù)模型！) tabModel = new QSqlTableModel ( this , DB ); // 數(shù)據(jù)表 //2. 設(shè)置? 視圖的模型(這里是數(shù)據(jù)模型！) ui - tableView - setModel ( tabModel ); 模
2024年01月22日
瀏覽(25)
facebook多賬號(hào)運(yùn)營(yíng)為什么要用靜態(tài)住宅ip代理？
在進(jìn)行Facebook群控時(shí)，ip地址的管理是非常重要的，因?yàn)镕acebook通常會(huì)檢測(cè)ip地址的使用情況，如果發(fā)現(xiàn)有異常的使用行為，比如從同一個(gè)ip地址頻繁進(jìn)行登錄、發(fā)布內(nèi)容或者在短時(shí)間內(nèi)進(jìn)行大量的活動(dòng)等等，就會(huì)視為垃圾郵件或者惡意行為，導(dǎo)致賬戶被禁用或者限制。因此，
2024年02月21日
瀏覽(17)
機(jī)器學(xué)習(xí)分類，損失函數(shù)中為什么要用Log，機(jī)器學(xué)習(xí)的應(yīng)用
目錄損失函數(shù)中為什么要用Log 為什么對(duì)數(shù)可以將乘法轉(zhuǎn)化為加法？機(jī)器學(xué)習(xí)（Machine Learning）機(jī)器學(xué)習(xí)的分類監(jiān)督學(xué)習(xí) 無(wú)監(jiān)督學(xué)習(xí) 強(qiáng)化學(xué)習(xí) 機(jī)器學(xué)習(xí)的應(yīng)用應(yīng)用舉例：貓狗分類 1. 現(xiàn)實(shí)問題抽象為數(shù)學(xué)問題 2. 數(shù)據(jù)準(zhǔn)備 3. 選擇模型 4. 模型訓(xùn)練及評(píng)估 5.預(yù)測(cè)結(jié)果推薦閱讀
2024年02月11日
瀏覽(24)
為什么3D開發(fā)要用三維模型格式轉(zhuǎn)換工具HOOPS Exchange？
在當(dāng)今數(shù)字化時(shí)代，3D技術(shù)在各個(gè)行業(yè)中扮演著愈發(fā)重要的角色，從產(chǎn)品設(shè)計(jì)到制造、建筑、醫(yī)療保健等領(lǐng)域。然而，由于不同的軟件和系統(tǒng)使用不同的3D模型格式，跨平臺(tái)、跨系統(tǒng)之間的數(shù)據(jù)交換和共享變得十分復(fù)雜。為了解決這一難題，Tech Soft 3D公司推出了HOOPS Exchange，一
2024年03月27日
瀏覽(19)