在 Vue 模板文件中的伪元素内容或背景图片中使用 SVG

Posted 2023-02-22

【中文标题】在 Vue 模板文件中的伪元素内容或背景图片中使用 SVG

【英文标题】：Use SVG in pseudo element content or background image in Vue template file

【发布时间】：2019-11-27 05:22:39

【问题描述】：

我不知道如何在 Vue 模板文件中使用 SVG 文件作为伪内容元素。

在我的 Vue 模板文件 (Select.vue) 的范围 CSS 中，我有：

.wrap 
  &:after 
    content: url("../../assets/icons/caret-down-solid.svg");
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
  

路径是相对于组件位置的。但它不会简单地出现。

我尝试并注意到的事情：

我也尝试过在 URL 周围不使用 " "。 我尝试使用background-image 和content: " " 代替，但也没有用。

它工作绝对网址（例如网络上的测试文件）

在我的示例中它确实解析了本地 URL，因为当我执行 ../../../asserts/icons/caret-down-solid.svg 以采用错误的路径时，它将无法编译。

所以看起来文件已被解析，语法正确，但无论出于何种原因，它都没有显示出来。

编辑：在使用 background-image 检查伪元素时，我看到了：

background-image: url([object Module]);

【问题讨论】：

这个作用域的 CSS 是如何渲染的？这是 vue 直接放入页面源的东西，还是通过外部样式表加载的？ （外部样式表中的相对路径是相对于样式表的位置的。）

@misorude 并非如此，正如您在我的编辑中看到的那样，它试图将链接作为模块加载。

【参考方案1】：

如果有人遇到这个问题，我设法解决了这个问题。 问题是我使用的vue-svg-loader 将.svg 文件作为模块导入。所以我不得不使用svg-url-loader 将svgs 导入到样式中。

在我添加的chainWebpack 选项下的vue.config.js 中：

config.module.rule("svg")
  .oneOf("inline")
    .resourceQuery(/inline/)
    .use("svg-url-loader")
      .loader("svg-url-loader")
      .end()
    .end()
  .oneOf("external")
    .use("vue-svg-loader")
      .loader("vue-svg-loader");

当您将 ?inline 附加到您的 svg 时，它会使用不同的加载器（在本例中为 svg-url-loader）处理它

所以在 CSS 中你这样做：

.wrap 
  &:after 
    content: url("../../assets/icons/caret-down-solid.svg?inline");
    position: absolute;
    right: 0;
    width: 50px;
    height: 50px;
  

它会正确内联导入 SVG。