Angular 在滑块中以角度显示包含文本和标记的字符串中的图像

我正在Angular的博客系统中工作，在这个系统中，我使用文本编辑器orngx文本编辑器插入图像和文本。我还将图像和文本保存到数据库中。但是，当我想以单独的方式显示滑块中的图像和文本时，我无法将图像与文本分开

import { Component, OnInit } from '@angular/core';
import { UserService} from '../_services';
import { User } from '../_models/user'
import { Subscription } from 'rxjs';
import { first } from 'rxjs/operators'
import { AuthenticationServiceService } from '../_services';
@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
  users: User[] = [];
  msg: string = null;

  constructor( private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }

  ngOnInit() {
    this.getBlog();
  }
  private getBlog() {
    this.userService.getBlog().pipe(first()).subscribe(users => {
      this.users = users;

      console.log(this.users);
  });
  }
}

<p class="new22" style="word-wrap: break-word;" [innerHTML]="user.blog"></p>

其中，console.logthis.users；我有图片和文字

import { Component, OnInit } from '@angular/core';
import { UserService} from '../_services';
import { User } from '../_models/user'
import { Subscription } from 'rxjs';
import { first } from 'rxjs/operators'
import { AuthenticationServiceService } from '../_services';
@Component({
  selector: 'app-blog',
  templateUrl: './blog.component.html',
  styleUrls: ['./blog.component.css']
})
export class BlogComponent implements OnInit {
  users: User[] = [];
  msg: string = null;

  constructor( private authenticationService: AuthenticationServiceService,
    private userService: UserService) { }

  ngOnInit() {
    this.getBlog();
  }
  private getBlog() {
    this.userService.getBlog().pipe(first()).subscribe(users => {
      this.users = users;

      console.log(this.users);
  });
  }
}

<p class="new22" style="word-wrap: break-word;" [innerHTML]="user.blog"></p>

当我使用innerHTML在html中显示数据时，它同时显示图像和文本。我想在滑块中分别显示图像和文本。字符串包含标记和文本。非常感谢您的帮助

// use this pick all img out
var patt1 = /<img(.*?)>/g;
const m = str.match(patt1);

---

所以我的问题是，从数据库中，标签和文本都会出现。那么，如何将它们分开并在滑块中显示所有图像。非常感谢您的帮助。

假设您的user.blog文本字符串如下：

// use this pick all img out
var patt1 = /<img(.*?)>/g;
const m = str.match(patt1);

Some length of text followed by <img src="image/url.jpg"> followed by more text.

请记住，文本字符串基本上是一个字符数组，您可以编写一个函数，对文本进行迭代，并执行以下操作：

找到的索引，将字符串中的字符从新开始移动到blogImage数组中，然后重复

---

通过对整个字符串进行迭代，您可以将所有博客文本移动到博客文本字符串中，最后生成一个图像URL数组，然后您可以按照自己的喜好单独显示它们。

假设您的user.blog文本字符串如下所示：

Some length of text followed by <img src="image/url.jpg"> followed by more text.

请记住，文本字符串基本上是一个字符数组，您可以编写一个函数，对文本进行迭代，并执行以下操作：

找到的索引，将字符串中的字符从新开始移动到blogImage数组中，然后重复

---

通过迭代整个字符串，您可以将所有博客文本移动到blogText字符串中，并最终生成一个图像URL数组，然后您可以根据需要单独显示它们。

否，就像从编辑器插入文本和图像时一样。所以，图像和文本都将进入数据库。所以，这就是为什么我要求将两者分开，img标记和来自数据库的文本。我的意思是这没有意义，你使用博客id从数据库查询数据，对吗？在API级别，前端的API是可以的，但是你可以使用这个API调用和博客id做两件事，一件是只查询文本，另一件是只查询图像。是的，但是我的问题不同。我只想将图像和文本与来自数据库的字符串分开。你是说文本和图像位置混合在一个字符串中？不，就像从编辑器插入文本和图像时一样。所以，图像和文本都将进入数据库。所以，这就是为什么我要求将两者分开，img标记和来自数据库的文本。我的意思是这没有意义，你使用博客id从数据库查询数据，对吗？在API级别，前端的API是可以的，但是你可以使用这个API调用和博客id做两件事，一件是只查询文本，另一件是只查询图像。是的，但是我的问题不同。我只想将图像和文本与来自数据库的字符串分开。你是说文本和图像位置混合在一个字符串中？