文章/答案/技术大牛

发布

问角度数据URL处理
EN

Stack Overflow用户

提问于 2018-09-06 04:30:15

回答 1查看 166关注 0票数 0

我使用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，则显示正确。我尝试不使用angular，样式是来自原始CSS文件的样式，并且两个标志都正确显示：

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

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

使用Angular

不带角度

css

angular

svg

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-09-06 06:14:52

我不知道为什么，但是angular是从文件夹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

我认为你应该在angular github资源库中打开一个问题

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/52192974

复制

相似问题

问角度数据URL处理
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度数据URL处理EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问角度数据URL处理
EN