vue2 element图片展示

在Vue2中使用Element UI库来展示图片通常涉及Element UI提供的`<el-image>`组件。这个组件可以方便地显示静态图片、懒加载图片，甚至是响应式的图片。

使用步骤如下：

1. 首先，在HTML模板中引入`<el-image>`组件：

<template>
  <div>
    <el-image :src="imageUrl" alt="图片描述"></el-image>
  </div>
</template>

2. 在对应的JS文件中，通过数据属性`imageUrl`绑定实际的图片URL，例如从API获取或存储在Vuex状态中：

export default {
  data() {
    return {
      imageUrl: '默认图片路径', // 可以是一个字符串或变量
    };
  },
  // ...其他生命周期钩子和计算属性
};

3. 如果需要支持懒加载，可以在`<el-image>`上添加`lazy`属性：

<el-image :src="imageUrl" lazy></el-image>

4. 若想让图片适应容器大小，可以设置`fit`属性，如`fit="cover"`用于填充整个容器并保持宽高比。

相关问题

vue2 element-ui上传图片

要在 Vue2 中使用 Element-UI 进行图片上传，需要进行以下步骤：

1. 安装 Element-UI：

npm install element-ui --save

2. 引入 Element-UI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

3. 在 HTML 中添加上传组件：

<template>
  <div>
    <el-upload
      class="avatar-uploader"
      :action="uploadUrl"
      :show-file-list="false"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
    >
      <img v-if="imageUrl" :src="imageUrl" class="avatar">
      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
  </div>
</template>

其中，`:action` 属性指定了上传图片的地址，`:show-file-list` 属性设置为 `false`，表示不展示上传的文件列表，`:on-success` 属性指定了上传成功后的回调函数，`:before-upload` 属性指定了上传之前的回调函数。

4. 在 JavaScript 中添加上传相关方法：

<script>
export default {
  data() {
    return {
      imageUrl: '',
      uploadUrl: 'your-upload-url'
    }
  },
  methods: {
    handleSuccess(res) {
      this.imageUrl = URL.createObjectURL(res.raw)
    },
    beforeUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG && !isPNG) {
        this.$message.error('上传图片只能是 JPG 或 PNG 格式!')
        return false
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!')
        return false
      }
      return true
    }
  }
}
</script>

其中，`handleSuccess` 方法在上传成功后将图片显示出来，`beforeUpload` 方法用于校验上传的图片格式和大小，并在校验失败时提示错误信息。

以上就是使用 Element-UI 进行图片上传的基本流程。

vue的element图片上传

使用Vue的element图片上传是通过调用上传接口成功后，从接口中获取图片的附件信息，即图片的地址（attUrl）和ID（atta），然后将这些信息push到checkBaseForm.vehiCheckDetails中进行遍历展示。可以通过v-for指令遍历checkBaseForm.vehiCheckDetails数组，使用el-col组件设置每个图片的样式和布局，并将图片的地址绑定到el-image组件的src属性上，使用el-icon-delete图标作为删除图片的按钮。在点击删除图标的事件处理函数中，可以进行图片的删除操作。