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?echarts@4.x中國(guó)地圖及AMap相關(guān)API使用詳解
這篇文章主要為大家介紹了Vue使用echarts@4.x中國(guó)地圖及AMap相關(guān)API使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-12-12
vue中for循環(huán)更改數(shù)據(jù)的實(shí)例代碼(數(shù)據(jù)變化但頁(yè)面數(shù)據(jù)未變）
這篇文章主要介紹了vue中for循環(huán)更改數(shù)據(jù)的實(shí)例代碼(數(shù)據(jù)變化但頁(yè)面數(shù)據(jù)未變）的相關(guān)資料,需要的朋友可以參考下2017-09-09
Vue提供了豐富的API和組件，可以幫助開(kāi)發(fā)者快速地構(gòu)建現(xiàn)代化的Web應(yīng)用程序，本文介紹了Vue如何實(shí)現(xiàn)分頁(yè)功能，包括數(shù)據(jù)的獲取、分頁(yè)器的實(shí)現(xiàn)和頁(yè)面的渲染2023-09-09
基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程詳解
本文分步驟給大家介紹了基于vue cli重構(gòu)多頁(yè)面腳手架過(guò)程，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下2018-01-01
Vue導(dǎo)出Excel,后端返回的文件流,前端接收后無(wú)法打開(kāi)文件的解決
在使用Vue導(dǎo)出Excel時(shí),如果后端返回文件流,前端接收后無(wú)法打開(kāi)文件,通常是由于響應(yīng)類型設(shè)置不正確導(dǎo)致的,通過(guò)設(shè)置axios請(qǐng)求接口時(shí)的響應(yīng)類型為`blob`,并使用blob轉(zhuǎn)換文件流,可以解決文件損壞無(wú)法打開(kāi)的問(wèn)題2025-12-12
antd配置config-overrides.js文件的操作
這篇文章主要介紹了antd配置config-overrides.js文件的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
Vue.js 應(yīng)用性能優(yōu)化分析+解決方案
這篇文章主要介紹了Vue.js 應(yīng)用性能優(yōu)化分析以及解決方案，VueJS 是開(kāi)發(fā)網(wǎng)站最受歡迎、最穩(wěn)定的 JavaScript 框架，但與其他框架一樣，如果您忽略它，性能就會(huì)受到影響，下面我們就一起來(lái)看看怎么才能讓性能提升吧2021-12-12
Vue3前端做打印頁(yè)面信息實(shí)現(xiàn)打印功能(打印界面某個(gè)部分)
這篇文章主要介紹了如何使用vue3-print-nb依賴在Vue?3項(xiàng)目中實(shí)現(xiàn)頁(yè)面打印功能,提供了完整的代碼示例,大家可以根據(jù)項(xiàng)目需求選擇合適的打印方法,需要的朋友可以參考下2025-02-02
vue-router 源碼之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vue-router
這篇文章主要介紹了vue-router 源碼之實(shí)現(xiàn)一個(gè)簡(jiǎn)單的 vue-router，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-07-07
這篇文章主要給大家介紹了關(guān)于vue路由中前進(jìn)后退的一些事兒，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用vue路由具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05