javascript - CSS 背景图像不显示 meteor

Question

我正在尝试基于 leaderboard example 创建一个简单的 meteor 元素在他们的网站上。我想在每个玩家的分数旁边添加一个小图标。为此，我创建了一个名为 public 的文件夹，并将 test.png 图像放在那里。在 .player .score 的 css 中，我将图像添加为背景图像，而不是它看起来像这样

.player .score {
   background-image: url('test.png');
   display: inline-block;
   width: 100px;
   text-align: right;
   font-size: 2em;
   font-weight: bold;
   color: #777;
}

当我部署元素时，图像显示为空白。图片的 url 没有损坏，因为如果我在 chrome 浏览器中使用 inspect element 并转到 resources，我可以看到图片已加载。

Answer 1

两件事。

1) 请记住，对于排行榜示例，向 .player .score 后代选择器添加背景会将图像放在分数下方，而不是下一个给它。要将图像放在乐谱旁边，请向 player 模板添加一个空 span:

<template name="player">
  <div class="player {{selected}}">
    <span class="name">{{name}}</span>
    <span class="score">{{score}}</span>
    <span class="icon"></span>
  </div>
</template>

2) 您需要为跨度以及添加背景图像的大小。在您的 CSS 中，分别为图像设置样式:

.icon{
    background-image: url('test.png');
    background-size: 40px 40px;
    background-repeat:no-repeat;
    width: 40px;
    height: 40px;
    display: inline-block;
}

对于放置在 public 目录根目录下的图像，上面的结果是: