Question

我正在尝试显示斑点图像。在IE 11中，它不受支持并显示损坏的图像，因此我创建了一个将blob图像转换为base 64的管道。

是否可以将管道绑定到新创建的图像元素？

以下代码似乎无效，

const uploadedImgElement = document.createElement('img');
uploadedImgElement.src = response.data.attachmentDetails.fileFullPath + '| blobToBase64';

其中blobToBase64是管道。

Answer 1

您应该在组件内部声明管道

document.querySelector('.phone_us').addEventListener('input', function() { //Using input event for instant effect
  let text=this.value                                                      //Get the value
  text=text.replace(/\D/g,'')                                              //Remove illegal characters
  if(text.length>3) text=text.replace(/.{3}/,'$&-')                        //Add hyphen at pos.4
  if(text.length>7) text=text.replace(/.{7}/,'$&-')                        //Add hyphen at pos.8
  this.value=text;                                                         //Set the new text
});

Answer 2

您还可以参考此示例在Angular应用程序中添加图像元素：

html代码：

<div id="div_container">

</div>

Component.ts：

export class AboutComponent implements OnInit {

  constructor(private sanitizer:DomSanitizer) { }
  ngOnInit() {

    const newimage = document.createElement("img");
    newimage.src = this.base64Image;
    document.getElementById("div_container").innerHTML = newimage.outerHTML;

  }

  base64Image='data:image/png;base64, base64data';
}

屏幕截图类似this。

将角度管道绑定到动态创建的HTML元素

2 个答案: