vue 如何拿到后台傳回的富文本中的img,進行9宮格排列展示以及相關處理


描述: res.data.list 返回的數組, 數組中的每個對象有一個 content,就是傳回來的富文本的內容,要拿到這里面的所有的img,進行9宮格排列處理;

1let 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, 在進行自定義賦值,處理等操作 ;

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM