vue取ueditor内容第一张图做封面，无图使用默认图做封面
Posted chirm7
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue取ueditor内容第一张图做封面，无图使用默认图做封面相关的知识，希望对你有一定的参考价值。
一、获取第一张图片
获取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内容第一张图做封面，无图使用默认图做封面的主要内容，如果未能解决你的问题，请参考以下文章
ueditor插入html代码保存后，再次编辑文章时html代码被过滤只显示文本内容！