角度数据处理

flag-icon-css 对于某些标志,由于 background-image 不同解释的属性。我没有成功地创建一个Stackblitz,所以这里是复制的最小步骤:

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

在角度.json,我添加了CSS:

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

在应用程序组件.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,则显示正确。我尝试不使用angular,样式是来自原始CSS文件的样式,两个标志都正确显示:

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

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

无棱角