Angular 6，加载 svg 不会出现在 chrome 中

Question

我正在尝试在 Angular 6 中加载几个小部件，并创建了一个加载符号 svg ，并使用以下逻辑隐藏和显示加载 div ，直到加载所有小部件，在 firefox 中，加载 svg 正常显示，但是在 chrome 和 IE 中，在加载所有小部件之前会出现一个空白窗口，如果我用文本替换 svg，即使它不会出现在 Chrome 中，这里是代码

app.component.html

 <div [hidden]="counter >= 3" class="loading-div"> 
       <img src="assets/icons/loading-bee.svg" type="image/svg+xml"/>
       <span class="loading-bee-txt">Please wait while we retrieve the data.</span>
</div>
  <div>
    <wgt-financials (initialized)="counter = counter + 1"></wgt-financials>
    <wgt-financials (initialized)="counter = counter + 1"></wgt-financials>
    <wgt-financials (initialized)="counter = counter + 1"></wgt-financials>
  </div>
<div>

这在 Firefox 中完美运行，但在 Chrome 或 IE 中却不行。

Answer 1

您不需要在 img 标签中添加“类型”。尝试删除“类型”。

<img src="assets/icons/loading-bee.svg"/>

也可以使用 [hidden] 来使用 *ngIf

*ngIf 与 [隐藏]

*ngIf 有效地从 DOM 中删除其内容，而 [hidden] 修改了 display 属性，仅指示浏览器不显示内容，但 DOM 仍然包含它。

<div *ngIf="counter !> 3 && counter != 3" class="loading-div"> 
   <img src="assets/icons/loading-bee.svg"/>
   <span class="loading-bee-txt">Please wait while we retrieve the data. 
   </span>
</div>