Vue.js项目中如何为伪类添加动态背景图片

你的写法不生效主要有两个核心原因：

1. CSS原生url()函数对内部嵌套var()变量的解析规则特殊，如果变量仅存储纯图片地址、未包裹引号，地址中存在特殊字符/空格/中文时会被识别为非法路径
2. 若使用项目内静态资源地址，未经过Vue的资源打包处理的相对路径会在打包后出现404问题

推荐使用两种经过验证的兼容方案：

方案1：变量直接拼接完整url（兼容性最好，优先推荐） #

直接在模板绑定时就把url()包裹到变量值中，CSS侧直接引用变量即可：

<!-- 模板部分修改为如下写法 -->
<div id="myContent" :style="{ '--bgImage': `url(${content.icon.url})` }">
  ...此处为相关内容
</div>

/* 样式部分修改为如下写法 */
#myContent {
  &:after {
    content: '';
    background: var(--bgImage); /* 直接引用变量即可 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: top left;
    /* 其余原有样式保持不变 */
    width: 40vw;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    transform: translateY(-0vh);
  }
}

方案2：CSS中url调用时补充引号 #

如果你需要把地址和url拆分开维护，也可以给变量值补充引号，同时CSS侧url()内的变量外层加引号包裹：

<!-- 绑定时给地址加引号 -->
<div id="myContent" :style="{ '--bgImage': `"${content.icon.url}"` }">
  ...此处为相关内容
</div>

/* 样式部分保持原有写法即可 */
#myContent {
  &:after {
    content: '';
    background: url(var(--bgImage));
    /* 其余样式不变 */
  }
}

如果使用的是/src/assets目录下的本地静态图片，需要先通过import或者require引入资源后再赋值给地址变量，避免Vue打包时无法正确解析相对路径：

// script中提前引入资源
import customIcon from '@/assets/background.png'
// 赋值时直接使用引入后的变量
content.icon.url = customIcon

内容的提问来源于stack exchange，提问作者ST80