Vue项目中获取html字符串中的图片地址

1、正则表达式

const RegEx = /(?<=(img src="))[^"]*?(?=")/gims

2、获取html字符串中所有img标签图片地址(Array)

const htmlStr = '<p><img src="1.png" /><img src="2.png" /><img src="3.png" /><img src="4.png" /></p>'
const images = text.match(RegEx)

3、Vue过滤器中加入获取img地址方法，如：getImgUrl

export default {
	filters: {
		getImgUrl(html) {
            const RegEx = /(?<=(img src="))[^"]*?(?=")/gims
            if(html && html.match(RegEx) && html.match(RegEx).length > 0) {
                return html.match(RegEx)[0]
            }
            return require('默认图片地址')
        },
        // 过滤HTML文本中图片地址为本地磁盘地址的图片
        getImgUrl2(html) {
            const RegEx = /(?<=(img src="))[^"]*?(?=")/gims
            if(html && html.match(RegEx) && html.match(RegEx).length > 0 && html.match(RegEx)[0].indexOf('file:///') === -1) {
                return html.match(RegEx)[0]
            }
            return require('默认图片地址')
        }
	}
}

4、使用

<img :src="item.content | getImgUrl" alt="">