elementui照片

以下是关于 Element UI 照片（图片）相关组件的整理和用法说明：

Element UI 图片相关组件

el-image

• 用于展示图片，支持懒加载、占位图、图片预览等功能。
• 基础用法：

  <el-image :src="url" fit="cover"></el-image>

• 属性：
  • src: 图片地址（必填）
  • fit: 图片填充方式（cover/contain/fill/none/scale-down）
  • lazy: 是否懒加载
  • preview-src-list: 开启预览功能时的大图地址数组

el-avatar

• 用于头像展示，可替代图片显示圆形/方形头像。
• 基础用法：

  <el-avatar :size="50" :src="circleUrl"></el-avatar>

图片上传组件

el-upload

• 核心上传组件，支持拖拽上传、文件列表展示、多格式限制等。
• 基础用法：

  <el-upload
    action="https://upload.url"
    :on-success="handleSuccess"
    :file-list="fileList">
    <el-button type="primary">点击上传</el-button>
  </el-upload>

• 关键属性：
  • action: 上传接口地址
  • auto-upload: 是否自动上传
  • limit: 文件数量限制
  • accept: 文件类型限制（如".jpg,.png"）

图片预览功能

通过 el-image 的预览功能实现：

<el-image 
  :src="thumbnailUrl"
  :preview-src-list="[largeUrl]">
</el-image>

注意事项

1. 需要单独引入样式文件：

   import 'element-ui/lib/theme-chalk/index.css';

2. 大图预览功能依赖el-image-viewer组件，需确保正确引入
3. 移动端需额外处理手势操作兼容性

常见问题解决方案

• 图片加载失败时显示默认图：

  <el-image :src="url" @error="handleError">
    <div slot="error" class="error-slot">
      <i class="el-icon-picture-outline"></i>
    </div>
  </el-image>

• 上传前校验图片大小：

  

  beforeUpload(file) {
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isLt2M) {
      this.$message.error('图片大小不能超过 2MB');
    }
    return isLt2M;
  }