Angular数据URL处理

Question

我使用flag-icon-css库，对于某些标志，由于background-image属性的含义不同，因此大小不正确。我没有创建一个Stackblitz，所以这是复制的最小步骤：

ng new bug-so
cd bug-so
npm install flag-icon-css

在angular.json中，我添加了CSS：

        "styles": [
          "src/styles.css",
          "node_modules/flag-icon-css/css/flag-icon.min.css"
        ],

在app.component.html

中

<div style="padding: 5em">
  <span class="flag-icon flag-icon-es" style="border: 1px solid black"></span><br/>
  <span class="flag-icon flag-icon-fr" style="border: 1px solid black"></span><br/>
</div>

运行应用

ng serve

西班牙语标志解释为：

.flag-icon-es {
    background-image: url(es.svg);
}

而法国国旗则解释为：

.flag-icon-fr {
    background-image: url(data:image/svg+xml,%3Csvg xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%2…830%22 d%3D%22M426.662 0H640v480H426.662z%22%2F%3E %3C%2Fg%3E%3C%2Fsvg%3E);
}

如果背景图像是数据URL，则显示正确。我尝试了没有角度的样式，样式是原始CSS文件中的样式，并且两个标记均正确显示：

.flag-icon-fr {
    background-image: url(../flags/4x3/fr.svg);
}

.flag-icon-es {
    background-image: url(../flags/4x3/es.svg);
}

带角度

无角

Answer 1

我不知道为什么，但是文件夹node_modules\flag-icon-css\flags\1x1中的角度服务而不是正确的node_modules\flag-icon-css\flags\4x3

为什么第二张图片正确但以奇怪的方式加载

那是因为第二个小于10kb，所以它不会被单独嵌入（并且由于某种原因有角度地嵌入了正确的图像）

https://github.com/angular/angular-cli/wiki/build#css-resources

我认为您应该在有角度的github存储库中打开一个问题