CSS伪元素不显示svg背景图片

Question

我目前正在尝试在伪元素::after 中使用本地文件中的 svg 我将在下面添加我的代码以及我在检查器中看到的关于它为什么不显示的内容。 PNG 有效，但 svg 无效。

  .select-box {
    position: relative;
    width: 70px;
    svg {
      position: absolute;
      top: -12px;
      right: 0;
    }
&:after {
      display: block;
      content: '';
      background-image: url('../assets/icons/arrow_dropdown.svg');
      background-size: 28px 28px;
      height: 28px;
      width: 28px;
    }
    select {
      width: 100%;
      height: 32px;
      font-size: 14px;
      cursor: pointer;
      border: none;
      border-bottom: 2px solid #808080;
      -webkit-appearance: none;
      appearance: none;
      &:focus {
        outline: none;
      }
    }
  }

SVG 文件：

<svg xmlns="http://www.w3.org/2000/svg" width="12.707" height="7.061" viewBox="0 0 12.707 7.061">
  <path id="Path_9731" data-name="Path 9731" d="M0,12,6,6,0,0" transform="translate(12.354 0.354) rotate(90)" fill="none" stroke="#000" stroke-width="1"/>
</svg>

Answer 1

最终为我工作的是安装 vue-svg-loader 并将 ?external 添加到 svg 路径的末尾。