Vue批量圖片顯示時(shí)遇到的路徑被解析問(wèn)題
最近在學(xué)Vue，感覺(jué)很難理解，學(xué)不懂。
昨天晚上開(kāi)始第一個(gè)頁(yè)面的搭建，腦子感覺(jué)通了一點(diǎn)，大概知道該怎么做了。
在放置輪播圖時(shí)，要調(diào)用很多圖片，圖片路徑在data的一個(gè)數(shù)組里，用v-for循環(huán)（因?yàn)檫€不會(huì)做輪播圖，從網(wǎng)上找的代碼）
圖片路徑是對(duì)的，但是不顯示，就用普通img標(biāo)簽放了個(gè)圖片看了一下，這樣
網(wǎng)頁(yè)上卻變成了這樣
于是我把每個(gè)圖片都放了一次，把每個(gè)解析后的地址都粘貼在數(shù)組里，成了
但是這種方法也太蠢了，以后不能也這樣辦吧
就在網(wǎng)上查了一下，要加一個(gè)require，很多帖子里的圖片路徑都加了個(gè)require，那就試試
成功！ 但是不知道是什么原理，大概是把路徑的字符串封裝起來(lái)了？
然后又去查了查require是干啥的，感覺(jué)用過(guò) ，但不知道哪里用過(guò)
使用位置
require是運(yùn)行時(shí)調(diào)用，所以require理論上可以運(yùn)用在代碼的任何地方
require本質(zhì)
require是賦值過(guò)程，其實(shí)require的結(jié)果就是對(duì)象、數(shù)字、字符串、函數(shù)等，再把require的結(jié)果賦值給某個(gè)變量
這樣的話就把路徑字符串變成變量了
以上所述是小編給大家介紹的Vue批量圖片顯示時(shí)遇到的路徑被解析問(wèn)題詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
解決element DateTimePicker+vue彈出框只顯示小時(shí)
這篇文章主要介紹了解決element DateTimePicker+vue彈出框只顯示小時(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)
這篇文章主要介紹了vue如何動(dòng)態(tài)綁定img的src屬性(v-bind)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
關(guān)于net?6+vue?插件axios?后端接收參數(shù)問(wèn)題
接到這樣一個(gè)項(xiàng)目需求是這樣的，前端vue?必須對(duì)象傳遞后端也必須對(duì)象接收，接下來(lái)通過(guò)本文給大家介紹下net?6+vue?插件axios?后端接收參數(shù)的問(wèn)題,需要的朋友可以參考下2022-01-01
在?Vue?3?中,封裝自定義指令可以幫助你更好地復(fù)用一些常見(jiàn)的DOM操作邏輯,自定義指令可以用于處理一些特定的用戶交互行為,本文給大家介紹了Vue3封裝自定義指令的示例,需要的朋友可以參考下2024-11-11
Vue動(dòng)態(tài)加載ECharts圖表數(shù)據(jù)的方式
這篇文章主要介紹了Vue動(dòng)態(tài)加載ECharts圖表數(shù)據(jù)的方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
本文主要介紹了在使用el-select實(shí)現(xiàn)下拉選擇緩存時(shí)遇到的問(wèn)題及解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-01-01
解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題
這篇文章主要給大家介紹了如何解決vue3項(xiàng)目打包后部署后某些靜態(tài)資源圖片不加載問(wèn)題,文中通過(guò)圖文結(jié)合的方式講解的非常詳細(xì),有需要的朋友可以參考下2024-05-05
vue translate peoject實(shí)現(xiàn)在線翻譯功能【新手必看】
這篇文章主要介紹了vue translate peoject實(shí)現(xiàn)在線翻譯功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
這篇文章主要介紹了vue關(guān)于Promise的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
Vue組件簡(jiǎn)易模擬實(shí)現(xiàn)購(gòu)物車
這篇文章主要為大家詳細(xì)介紹了Vue組件簡(jiǎn)易模擬實(shí)現(xiàn)購(gòu)物車，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12