Vue如何由本地js中存放的url地址獲取圖片
更新時(shí)間：2023年09月26日 09:22:51 作者：默默的小跟班
這篇文章主要介紹了Vue如何由本地js中存放的url地址獲取圖片問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue由本地js中存放的url地址獲取圖片
對(duì)象必須放在js中（而不是json里面，json沒(méi)有require）。
如果是在json中，需要采用其他方式去獲取
注意：url地址必須用這種形式，有require
data.js
export const recommends = [
{
"pic": require('./1.png'),
"name": "adidas 阿迪達(dá)斯 訓(xùn)練 男子",
"price": "335",
"num": "1"
},
]index.vue
import { recommends } from './img/recommend/recommend';先引入
this.recommends = recommends;
然后要么在data里return這個(gè)對(duì)象，要么就采用這種賦值方式。
賦值方式可以省去多余的get/set方法
<p class="recommend-pic"><img class="recommend-img" :src="item.pic"></p>
<p class="recommend-name">{{item.name}}</p>讀取對(duì)象數(shù)據(jù)，兩個(gè)注意點(diǎn)：
- src前面 ： (v-bind綁定)。
- 直接獲取的參數(shù)需要兩個(gè)花括號(hào) {{ }}
Vue獲取html字符串中的圖片地址
1.正則表達(dá)式
const RegEx = /(?<=(img src="))[^"]*?(?=")/gims
2.獲取html字符串中所有img標(biāo)簽圖片地址(Array)
const htmlStr = '<p><img src="1.png" /><img src="2.png" /><img src="3.png" /><img src="4.png" /></p>' const images = text.match(RegEx)
3.Vue過(guò)濾器中加入獲取img地址方法
如：getImgUrl
export default {
?? ?filters: {
?? ??? ?getImgUrl(html) {
? ? ? ? ? ? const RegEx = /(?<=(img src="))[^"]*?(?=")/gims
? ? ? ? ? ? if(html && html.match(RegEx) && html.match(RegEx).length > 0) {
? ? ? ? ? ? ? ? return html.match(RegEx)[0]
? ? ? ? ? ? }
? ? ? ? ? ? return require('默認(rèn)圖片地址')
? ? ? ? },
? ? ? ? // 過(guò)濾HTML文本中圖片地址為本地磁盤(pán)地址的圖片
? ? ? ? getImgUrl2(html) {
? ? ? ? ? ? const RegEx = /(?<=(img src="))[^"]*?(?=")/gims
? ? ? ? ? ? if(html && html.match(RegEx) && html.match(RegEx).length > 0 && html.match(RegEx)[0].indexOf('file:///') === -1) {
? ? ? ? ? ? ? ? return html.match(RegEx)[0]
? ? ? ? ? ? }
? ? ? ? ? ? return require('默認(rèn)圖片地址')
? ? ? ? }
?? ?}
}4、使用
<img :src="item.content | getImgUrl" alt="">
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue新玩法VueUse工具庫(kù)具體用法@vueuse/core詳解
這篇文章主要介紹了vue新玩法VueUse-工具庫(kù)@vueuse/core,VueUse不是Vue.use，它是一個(gè)基于?Composition?API?的實(shí)用函數(shù)集合，下面是具體的一些用法，需要的朋友可以參考下2022-08-08
Vue.prototype全局變量的實(shí)現(xiàn)示例
在Vue中可以使用Vue.prototype向Vue的全局作用域添加屬性或方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-06-06
Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能
這篇文章主要介紹了Vue拖拽組件列表實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面配置功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
Element-UI el-calendar樣式如何修改日歷
這篇文章主要介紹了Element-UI el-calendar樣式如何修改日歷問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-08-08
Vue實(shí)現(xiàn)表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法
這篇文章主要介紹了Vue實(shí)現(xiàn)表格中對(duì)數(shù)據(jù)進(jìn)行轉(zhuǎn)換、處理的方法,需要的朋友可以參考下2018-09-09
這篇文章主要為大家詳細(xì)介紹了Vue的computed計(jì)算屬性，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-03-03
Vue輸入框狀態(tài)切換&自動(dòng)獲取輸入框焦點(diǎn)的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue輸入框狀態(tài)切換&自動(dòng)獲取輸入框焦點(diǎn)的實(shí)現(xiàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-05-05
文章主要內(nèi)容是關(guān)于如何在項(xiàng)目中引入依賴項(xiàng)以及編寫(xiě)組件代碼的步驟和總結(jié),作者分享了個(gè)人經(jīng)驗(yàn),旨在為讀者提供參考,并鼓勵(lì)大家支持腳本之家2024-12-12
Vue3?接入?i18n?實(shí)現(xiàn)國(guó)際化多語(yǔ)言案例分析
在?Vue.js?3?中實(shí)現(xiàn)網(wǎng)頁(yè)的國(guó)際化多語(yǔ)言,最常用的包是?vue-i18n,通常我們會(huì)與?vue-i18n-routing?一起使用,這篇文章主要介紹了Vue3?如何接入?i18n?實(shí)現(xiàn)國(guó)際化多語(yǔ)言,需要的朋友可以參考下2024-07-07
Element?plus?表單中下拉框的空值問(wèn)題解決
有時(shí)候會(huì)碰到查詢條件需要用下拉框來(lái)區(qū)分的時(shí)候,比如需要區(qū)分全部?|?啟用?|?停用三個(gè)狀態(tài),這時(shí)一般會(huì)給全部的value值設(shè)置為'',但是這樣會(huì)導(dǎo)致下拉框無(wú)法選中對(duì)應(yīng)的全部選項(xiàng),本文就來(lái)介紹一下這個(gè)問(wèn)題解決,感興趣的可以了解一下2024-11-11