elementui el-progress进度条尾端自定义图片

在Element UI中，el-progress进度条组件本身不支持在尾端自定义图片，但你可以通过自定义样式来实现这个效果。

以下是一个使用了CSS来在进度条尾端添加自定义图片的示例：

<template>
  <el-progress
    :percentage="50"
    :stroke-width="20"
    text-inside
    class="custom-progress"
  ></el-progress>
</template>
 
<style>
  .custom-progress .el-progress__text {
    display: none;
  }
 
  .custom-progress .el-progress-bar__inner {
    position: relative;
  }
 
  .custom-progress .el-progress-bar__inner::after {
    content: url('path_to_your_image.png');
    position: absolute;
    right: -10px; /* 调整到图片与进度条边缘合适的距离 */
    top: 50%;
    transform: translateY(-50%);
  }
</style>

在这个例子中，我们使用了CSS的伪元素::after来在进度条的尾端添加一个自定义图片。你需要将path_to_your_image.png替换为你的图片路径。通过调整right属性的值，你可以控制图片与进度条边缘的距离。

请注意，这种方法需要你根据实际情况调整图片与进度条的位置关系。如果进度条的宽度或高度会变化，你可能需要使用一些响应式的CSS来确保图片始终在进度条的尾端。