element-ui 图片更换

要在element-ui的el-dialog组件中修改弹窗里默认的关闭图标，可以通过更改CSS样式和替换背景图片的方式来实现。在html代码中，可以找到el-dialog组件的默认关闭图标所在的元素，通过设置该元素的display属性为none来隐藏默认图标。然后，在该元素的父级盒子上设置背景图片，将对应的图片引入。这样就可以替换掉el-dialog组件的默认关闭图标。以下是示例代码：

<template>
  <div class="custom-dialog">
    <el-dialog>
      <!-- el-dialog组件的内容 -->
    </el-dialog>
  </div>
</template>

<style scoped>
.custom-dialog .el-dialog__headerbutton {
  display: none;
  /* 隐藏默认关闭图标 */
  background-image: url('your-custom-image.png');
  /* 设置背景图片，替换默认图标 */
  background-size: cover;
  /* 根据需要调整背景图片的样式 */
}
</style>

在上述代码中，我们给el-dialog组件的父级盒子添加了一个自定义的class名custom-dialog。然后，通过在样式中使用scoped属性，将样式限制在当前组件的作用域内。在样式中，我们通过设置.el-dialog__headerbutton元素的display属性为none来隐藏默认关闭图标，并通过background-image属性设置背景图片来替换默认图标。请根据需要自行替换'your-custom-image.png'为你想要使用的图片路径。

这样，你就可以自定义element-ui的el-dialog组件中的关闭图标了。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *3* [element-ui中更换el-dialog弹窗中默认的关闭按钮](https://blog.csdn.net/Shivy_/article/details/127861530)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
- *2* [element-ui上传图片(多图）](https://blog.csdn.net/Allen_kaihui/article/details/126762791)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]