局部修改el-dialog样式

Question

问题遇到的现象和发生背景

修改el-dialog时，用类名选择修改header背景不生效

问题相关代码，请勿粘贴截图

<el-dialog v-model="dialogFormVisible"
                      width="39.4%"
                      top="15%"
                     class="my-dialog-name"
                     >

<style lang="scss">

  .el-dialog__header {
    background-image: url("src/assets/img/trash.png");
    background-repeat: no-repeat;
    height: 140px;
    width: 150%;
    background-position: 0 center;
    border-radius: 25px 25px 0 0;
    margin-top: -10%;
  }
}

运行结果及报错内容

修改无效

我的解答思路和尝试过的方法

尝试使用穿透

<style lang="scss">

  ::v-deep.el-dialog__header {
    background-image: url("src/assets/img/trash.png");
    background-repeat: no-repeat;
    height: 140px;
    width: 150%;
    background-position: 0 center;
    border-radius: 25px 25px 0 0;
    margin-top: -10%;
  }

我想要达到的结果

能修改el-dialog的样式

Answer 1

有没有把图片移到同目录下？