SVG-файлы корректно отображаются только в том случае, если они связаны с mimeType «application / json» в web.config - в противном случае возникает 406 ошибок.

Question

У меня проблема с тем, что мое приложение Angular / .net не отображает изображения SVG, когда я задаю в web.config следующее:

<remove fileExtension=".svg" /> <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

Однако SVG появляютсякогда я неправильно устанавливаю mimeType для application / json:

<remove fileExtension=".svg" /> <mimeMap fileExtension=".svg" mimeType="application/json" />

При использовании правильного я получаю ошибку 406 для каждого SVG, который я пытаюсь отобразить.Любая помощь приветствуется.

Я использую директиву ng-inline-svg для извлечения значков из пути, вот код шаблона:

<div class="col-sm-3 col-6 icon-selection-option" *ngFor="let n of items" (click)="selectFrequencyOption(n)">

  <div *ngIf="n === 'Weekly'" class="icon-selection-column text-center">
    <div [ngClass]="{ 'icon-selected': isSelected('Weekly') }" [inlineSVG]="'/assets/images/payroll-frequency/icon-weekly.svg'"></div>
    <span>{{ n }}</span>
    <p>7 day pay period</p>
  </div>

  <div *ngIf="n === 'Bi-Weekly'" class="icon-selection-column text-center">
    <div [ngClass]="{ 'icon-selected': isSelected('Bi-Weekly') }" [inlineSVG]="'/assets/images/payroll-frequency/icon-biweekly.svg'"></div>
    <span>{{ n }}</span>
    <p>14 day pay period</p>
  </div>

  <div *ngIf="n === 'Semi-Monthly'" class="icon-selection-column text-center">
    <div [ngClass]="{ 'icon-selected': isSelected('Semi-Monthly') }" [inlineSVG]="'/assets/images/payroll-frequency/icon-semimonthly.svg'"></div>
    <span>{{ n }}</span>
    <p>Two 14-16 day pay periods</p>
  </div>

  <div *ngIf="n === 'Monthly'" class="icon-selection-column text-center">
    <div [ngClass]="{ 'icon-selected': isSelected('Monthly') }" [inlineSVG]="'/assets/images/payroll-frequency/icon-monthly.svg'"></div>
    <span>{{ n }}</span>
    <p>30 day pay period</p>
  </div>

</div>