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

Posted 2023-02-22

【中文标题】CSS伪元素不显示svg背景图片

【英文标题】：CSS psuedo element not showing svg background image

【发布时间】：2021-08-07 12:31:33

【问题描述】：

我目前正在尝试在伪元素::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"   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-/>
</svg>

【问题讨论】：

你在使用 require 吗？

不使用require

最终的 CSS 是什么样子的？

如上代码所示

可能是 MIME 类型错误？

【参考方案1】：

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