Javascript 是否可以在角形元件内部包含img src？

我正在使用Angular 8，并尝试使用Angular Elements包“@Angular/Elements”中的createCustomElement（）命令创建一个可重用的Web组件

所以组件本身非常简单。它只包含一些包装器HTML代码和anIMG标记，带有一个标志图像的src。这是我的密码

HTML

<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
  <img class="logo align-middle" [src]="headerImgPath">
  <span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>

然后我将代码编译成AppModule内部的web组件，如下所示

   const el = createCustomElement(LogoComponent, { injector: this.injector });
   customElements.define('page-logo', el);

最后将导出的JS库拉入新的自定义HTML页面

HTML

<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
  <img class="logo align-middle" [src]="headerImgPath">
  <span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>

但我看到的只是HTML的一部分

在浏览器中渲染为

试试这个

<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
  <img class="logo align-middle" [src]="elements-assets/images/my-logo.svg">
  <span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>


{{this.headerBranding}}

还是这个

    <a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
      <img class="logo align-middle" [src]="this.logo">
      <span class="branding text-nowrap">{{ this.headerBranding }}</span>
    </a>


{{this.headerBranding}}
为什么选择“this.logo”而不仅仅是logo？logo无法正确调用您的资产。这个标志对你有用吗？
<a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
  <img class="logo align-middle" [src]="elements-assets/images/my-logo.svg">
  <span class="branding text-nowrap">{{ this.headerBranding }}</span>
</a>

    <a [routerLink]="homeURL" class="logo-branding no-link flex-grow-2">
      <img class="logo align-middle" [src]="this.logo">
      <span class="branding text-nowrap">{{ this.headerBranding }}</span>
    </a>