当前位置：首页 > 前端教程

elementui img

2026-03-06 07:32:03前端教程

ElementUI 图片（Img）组件使用指南

ElementUI 是一个基于 Vue.js 的组件库，虽然官方没有提供专门的 <img> 组件，但可以通过以下方法在 ElementUI 项目中高效使用图片。

基础图片展示

在 Vue 模板中直接使用 HTML 标准的 <img> 标签，结合 ElementUI 的样式类：

<template>
  <div class="el-card">
    <img src="path/to/image.jpg" alt="示例图片" class="el-image">
  </div>
</template>

图片懒加载

使用 ElementUI 的 v-loading 指令实现图片加载状态：

<template>
  <div v-loading="loading">
    <img 
      src="path/to/large-image.jpg" 
      @load="loading = false"
      @error="handleError"
    >
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: true
    }
  },
  methods: {
    handleError() {
      this.loading = false
      // 错误处理逻辑
    }
  }
}
</script>

图片预览功能

结合 ElementUI 的 Dialog 组件实现图片预览：

<template>
  <div>
    <el-button @click="dialogVisible = true">查看大图</el-button>
    <el-dialog :visible.sync="dialogVisible">
      <img src="path/to/large-image.jpg" style="width: 100%">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    }
  }
}
</script>

图片列表展示

使用 ElementUI 的 Layout 布局组件排列多张图片：

<template>
  <el-row :gutter="20">
    <el-col :span="6" v-for="(img, index) in images" :key="index">
      <el-card shadow="hover">
        <img :src="img.url" class="thumbnail">
      </el-card>
    </el-col>
  </el-row>
</template>

<style>
.thumbnail {
  width: 100%;
  height: 150px;
  object-fit: cover;
}
</style>

图片上传功能

结合 ElementUI 的 Upload 组件实现图片上传：

<template>
  <el-upload
    action="/api/upload"
    list-type="picture-card"
    :on-preview="handlePreview"
    :on-remove="handleRemove">
    <i class="el-icon-plus"></i>
  </el-upload>
</template>

<script>
export default {
  methods: {
    handlePreview(file) {
      // 预览逻辑
    },
    handleRemove(file, fileList) {
      // 删除逻辑
    }
  }
}
</script>

响应式图片处理

通过 CSS 实现图片在不同设备上的响应式显示：

<template>
  <el-container>
    <el-main>
      <img 
        src="path/to/image.jpg" 
        class="responsive-img"
        alt="响应式图片"
      >
    </el-main>
  </el-container>
</template>

<style>
.responsive-img {
  max-width: 100%;
  height: auto;
  display: block;
}
</style>

图片加载失败处理

添加默认图片和错误处理：

<template>
  <img 
    :src="imageUrl" 
    @error="handleImageError" 
    alt="商品图片"
  >
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'path/to/original.jpg',
      defaultImage: 'path/to/default.jpg'
    }
  },
  methods: {
    handleImageError() {
      this.imageUrl = this.defaultImage
    }
  }
}
</script>

这些方法可以帮助在 ElementUI 项目中高效地使用图片组件，结合 ElementUI 的其他组件可以实现更丰富的图片展示和交互功能。

elementui img