vue 从富文本文档中将照片的的路径取出_vue获取富文本中所有图片路径

在以富文本文档存进数据库中后,有图片和文字叙述,网页需要将图片单独取出进行以下操作

methods: {
    getInfo(){
      const id=this.$route.query.informationId;
      console.log(id+"详情id");
      getInformationInfo(id).then((ref)=>{
        console.log(ref.data);
        this.form=ref.data;
        const content=ref.data.informationContent;
        this.htmlContent=content.toString();
        console.log(this.htmlContent)
      })
    },
    getImageSrc() {
      // 创建一个临时元素，将HTML内容插入其中
      const tempElement = document.createElement('div');
      tempElement.innerHTML = this.htmlContent;
 
      // 查找 <img> 标签并获取 src 属性值
      const imgElement = tempElement.querySelector('img');
      if (imgElement) {
        const srcValue = imgElement.getAttribute('src');
        this.imagePath=srcValue
        console.log('Image src:', srcValue+"照片路径");
      } else {
        console.log('No <img> element found.');
      }
    },
 
  },