要在光标处向可编辑的 div 中添加带属性的图像标签，可以使用 Angular 7 的 Renderer2 来实现。以下是一个示例解决方法：

1. 在 HTML 模板中，创建一个可编辑的 div 元素，并为其添加一个唯一的标识符（比如 #editableDiv）：

2. 在组件的 TypeScript 文件中，导入 Renderer2 和 ElementRef：

import { Component, Renderer2, ElementRef } from '@angular/core';

3. 在组件的构造函数中注入 Renderer2 和 ElementRef：

constructor(private renderer: Renderer2, private elementRef: ElementRef) { }

4. 在组件的 ngOnInit 方法中，获取可编辑的 div 元素的引用，并为其绑定一个 click 事件监听器：

ngOnInit() {
  const editableDiv = this.elementRef.nativeElement.querySelector('#editableDiv');
  this.renderer.listen(editableDiv, 'click', this.handleClick.bind(this));
}

5. 在组件中定义 handleClick 方法，该方法会在点击可编辑的 div 元素时被调用。在该方法中，可以使用 Renderer2 创建一个图像元素，并为其设置属性：

handleClick(event) {
  const img = this.renderer.createElement('img');
  this.renderer.setAttribute(img, 'src', 'path/to/image.jpg');
  this.renderer.setAttribute(img, 'alt', 'Image');
  
  // 如果需要设置其他属性，可以使用类似的方式进行
  // this.renderer.setAttribute(img, 'attributeName', 'attributeValue');
  
  // 获取光标所在的位置，并将图像元素插入到光标处
  const range = window.getSelection().getRangeAt(0);
  range.insertNode(img);
}

通过以上步骤，当点击可编辑的 div 元素时，会在光标所在位置插入一个带有指定属性的图像标签。记得在组件的模板中添加适当的样式来显示图像标签。