Bootstrap-Vue将svg图像显示为nav-item？

问题描述

我想在NavBar的右上方显示Octocat图像：

在以下Vue代码段中，仅当await _dbContext.Example .Where(x => x.ParentId == parentid) .GroupBy(x => new { t.Type,t.Vote }) .Select(x => new { TrueVotes = x.Count(v => v.Vote == true),FalseVotes = x.Count(v => v.Vote == false),Type = x.Key.Type }) .ToListAsync(); 包含一些文本时，该图标才可见：

<b-nav-item>

https://codesandbox.io/s/holy-wind-7h9nn

解决方法

我假设您从Vue Bootstrap获得了此代码段，而您没有注意到缺少的navbar-nav-svg类：

<style scoped>
.navbar-nav-svg {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-top;
}
</style>

,

您的解决方案很好，但我建议仅将height属性添加到svg标记中：

 <svg
      class="navbar-nav-svg"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 512 499.36"
      focusable="false"
        height="1rem"
            >