首页 > 其他 > 详细

vue取ueditor内容第一张图做封面,无图使用默认图做封面

时间:2020-05-28 12:50:29      阅读:105      评论:0      收藏:0      [点我收藏+]

一、获取第一张图片

获取ueditor内容,并获取第一张图片url

let editHtml = window.myEditor.getContent()
    
let cover = this.getFirstImg(editHtml)
 
getFirstImg (html) {
   var a = html
   var arrimg = []
   a.replace(/<img [^>]*src=[‘"]([^‘"]+)[^>]*>/gi, function (match, capture) {
     arrimg.push(capture)
   })
   if (arrimg != null && arrimg.length > 0) {
     return arrimg[0]
   } else {
     return ‘‘
   }
 }
 

二、图片显示

 <img :src="item.cover" :onerror=‘placeholdImg‘ class="card-img">
 
data () {
  return {
    placeholdImg: ‘this.src="‘ + require(‘../assets/images/img_placehold.png‘) + ‘"‘
  }
}
 
onerror事件,当图片加载失败时,原本会显示一个裂开的图标,现在改成自己默认的图片
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

vue取ueditor内容第一张图做封面,无图使用默认图做封面

原文:https://www.cnblogs.com/chirm7/p/12979713.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!