html格式的图片数据处理展示

JKC_HOWL

于 2021-04-12 09:50:27 发布

阅读量267

点赞数 1

CC 4.0 BY-SA版权

文章标签： js vue elementui

本文链接：https://blog.youkuaiyun.com/JKC_HOWL/article/details/115612383

博客介绍了从后端获取HTML模板，然后截取其中a标签的href值，最后对处理后的数据进行展示的过程，涉及前端数据处理与展示相关内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

截取a标签的href值

请求数据拿到后端返回html模板

this.$axios.get('/static/xxxxxx/', {
	baseURL: ''
}).then(res => {
	console.log(res)
})

对拿到的html模板a标签的href值截取

const b = /<a([\s]+|[\s]+[^<>]+[\s]+)href=(\"([^<>"\']*)\"|\'([^<>"\']*)\')[^<>]*>/gi
const s = res.data.toLowerCase().match(b)
for(var i = 1; i < s.length; i++) { 
  let ss = s[i].toLowerCase().match(b);
  this.srcList.push('http://192.xxx.x.xx:3000' + RegExp.$3+RegExp.$4)
}

对数据数据进行展示

<el-image 
style="width:150px;height:150px;margin:0.6rem 0 0 0.6rem" 
v-for="url in srcList" 
:key="url" :src="url" 
lazy 
:preview-src-list="srcList"
></el-image>