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