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