描述: res.data.list 返回的数组, 数组中的每个对象有一个 content,就是传回来的富文本的内容,要拿到这里面的所有的img,进行9宫格排列处理;

1、let img = this.getObjectKeys(item.content.match(/<img[^>]+>/g));

  抓取到每个content中的 img, 成为数组,但是可能存在方法不标准,getObjectKeys 进行一下标准的转换;

    //写成标准的方法(数组是object的一种):
    getObjectKeys(object){
      var values = [];
      for (var property in object)
        values.push(object[property]);
      return values;
    }
 

2、循环拿到的img数组, replace 中 嵌套img正则

img[i].replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, function(match, capture) {
  arrImg += '<div class="img-box" style="background: url(\'' + capture + '\') no-repeat center / cover;width:150px;height:150px;margin: 0 15px 15px 0;display:inline-block" ></div>'
});

拿到所有的src,  也就是图中的capture, 在进行自定义赋值,处理等操作 ;

 

vue 如何拿到后台传回的富文本中的img,进行9宫格排列展示以及相关处理的更多相关文章

  1. 去除富文本中的html标签及vue、react、微信小程序中的过滤器

    在获取富文本后,又只要显示部分内容,需要去除富文本标签,然后再截取其中一部分内容:然后就是过滤器,在微信小程序中使用还是挺多次的,在vue及react中也遇到过 1.富文本去除html标签 去除htm ...

  2. Android检测富文本中的<img标签并实现点击效果

    本文旨在:通过点击一张图片Toast输出位置与url链接. 闲话少说,实现原理大概是酱紫的::通过正则表达式检测富文本内的图片集合并获取url,在src=“xxx” 后面添加 onclick方法,至于 ...

  3. 从html富文本中提取纯文本

    其实从html富文本中提取纯文本很简单,富文本基本上是使用html标签给文本加上丰富多彩的样式. 所以只需要将富文本字符串中的“<.....>”标签剔除,即可得到纯文本.我们可以使用正则表 ...

  4. easyui 后台系统引入富文本编辑器的使用

    1.首先,想在项目中引入相关的jar包 2.html页面中加入相关的引用 <!-- kindeditor --> <script type="text/javascript ...

  5. 搭建自己的博客(十三):为博客后台添加ckeditor富文本编辑器

    使用django默认的编辑器感觉功能太少了,所以集成一下富文本编辑器. 1.安装和使用 (1).安装 pip install django-ckeditor (2).注册应用 在django的sett ...

  6. vue修改富文本中的元素样式

    富文本编辑器目前应用很广泛,而有时候我们想要对其中的一些元素的样式进行修改,就会遇到问题. 首先,直接修改是不可行的,因为是用v-html标签进行渲染的,无法直接获取到. 在修改的时候,一般是按标签进 ...

  7. selenium自动化测试在富文本中输入信息的方法

    第一次用selenium+python编写自动测试脚本,因为页面中插入了富文本编辑,开始怎么都无法输入进去,度娘好多方法都无效,分享踩坑的经历一是为了记录一下自己的成长,二是为了给同样摸索seleni ...

  8. 微信小程序富文本中的图片大小超出屏幕

    这个问题我在小程序社区中提的,后来有个帮我回答了这个问题,我试了一下可以. 解决办法是过滤富文本内容,给图片标签添加一个样式,限制图片的最大宽度. replace(/\<img/gi,   '& ...

  9. selenium如何向ueditor富文本中自动输入文本

    1.网上给出的方法在百度的富文本控件ueditor中不起作用切换框架失败 2.利用ueditor的api文档,通过js不使用框架切换即可实现轻松写入 eg:ue.setContent('hello')

随机推荐

  1. 第一个FPGA工程—LED流水灯

    这一章我们来实现第一个FPGA工程-LED流水灯.我们将通过流水灯例程向大家介绍一次完整的FPGA开发流程,从新建工程,代码设计,综合实现,管脚约束,下载FPGA程序.掌握本章内容,大家就算正式的开始 ...

  2. python f-string

    文章目录 1. 主要内容 1.1. 旧时代的格式化字符串 1.1.1. Option #1: %-formatting 1.1.2. 怎样使用 %-formatting 1.1.3. 为什么 %-fo ...

  3. ubuntu16.04安装opencv2.4.13

    1.更新 sudo apt-get update sudo apt-get upgrade 2.安装关联库 2.1 搭建C/C++编译环境 sudo apt-get install build-ess ...

  4. 嵌入式系统C编程之堆栈回溯

    前言 在嵌入式系统C语言开发调试过程中,常会遇到各类异常情况.一般可按需添加打印信息,以便观察程序执行流或变量值是否异常.然而,打印操作会占用CPU时间,而且代码中添加过多打印信息时会显得很凌乱.此外 ...

  5. kafka系列八、kafka消息重复和丢失的场景及解决方案分析

    消息重复和丢失是kafka中很常见的问题,主要发生在以下三个阶段: 生产者阶段 broke阶段 消费者阶段 一.生产者阶段重复场景 1.根本原因 生产发送的消息没有收到正确的broke响应,导致pro ...

  6. pl sql 记住用户名密码

    tools--Preferences--Logon History 选择  “Store history”是默认勾选的,勾上“Store with password” 登录时从下拉框选择用户名则自动登 ...

  7. EntityFramework codefirst Enable-Migrations No context type was found in the assembly “MyApp.Web” error

    Enable-Migrations -Force -ContextTypeName "MyApp.Repository.DataContext" -ProjectName &quo ...

  8. 在Android开发中,定时执行任务的3种实现方法

    在Android开发中,定时执行任务的3种实现方法: 一.采用Handler与线程的sleep(long)方法(不建议使用,Java的实现方式)二.采用Handler的postDelayed(Runn ...

  9. 实现自己的Koa2

    这部分的代码在https://github.com/zhaobao1830/koa2中demo文件夹中 Koa就是基于node自带的http模块,经过封装,监听端口,实现ctx(上下文)管理,中间件管 ...

  10. 并发之AQS原理(三) 如何保证并发

    并发之AQS原理(三) 如何保证并发 1. 如何保证并发 AbstractQueuedSynchronizer 维护了一个state(代表了共享资源)和一个FIFO线程等待队列(多线程竞争资源被阻塞时 ...