不显示背景图片

Question

我在vue.js中开发一个组件，出现下面标签中图片不显示的问题：

<b-icon v-if="displayShowHistory && checkRole('showHistory')" class="backlight show-modal-icon" id="historyDoc" @click="showHistory"></b-icon>

.b-icon#historyDoc {
  background: url("../assets/history.png") center;
  background-size: contain;
  width: 32px;
}

在这种情况下，图像以样式显示在控制台中：

如何使图像正确显示在页面上？ 现在什么都没有显示。

Answer 1

您的背景图片的尺寸更大。 添加background-size: cover; 财产

Answer 2

我认为您的问题是您缺少height css 属性。 假设这是一个块元素，除了宽度之外，您还需要它。 否则，您的元素将具有 0 高度，这实际上意味着不会显示任何背景。

.b-icon#historyDoc {
  background: url("../assets/history.png") center;
  background-size: contain;
  height: 32px;
  width: 32px;
}

如果这是一个内联元素，您可能需要添加display: block; 以及。