elementui怎么显示图片

elementUI可以使用`<el-image>`组件来显示图片。通过设置`src`属性来指定图片的路径，可以使用`alt`属性设置图片的替代文本，使用`fit`属性来调整图片的自适应方式。例如：

<el-image :src="imageUrl" alt="图片" fit="contain"></el-image>

其中`imageUrl`是图片的路径。你还可以根据需要设置其他属性，例如图片的宽度、高度等。

相关问题

elementui上传图片并显示

要实现elementui上传图片并显示，可以按照以下步骤进行操作：

1. 在需要上传图片的页面中引入element-ui组件库。
2. 使用el-upload组件创建一个上传图片的容器，并设置相关属性，如上传地址、上传成功的回调函数等。
3. 在el-upload组件内部，使用el-button组件作为上传按钮。
4. 在el-upload组件内部，使用el-image组件来显示上传的图片。
5. 根据需要，可以设置el-upload和el-image的样式，例如设置上传容器的宽高、设置图片的尺寸等。

以下是一个示例代码：

<template>
  <div>
    <el-upload :action="uploadURL" :on-success="handleSuccess">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-image v-if="imageUrl" :src="imageUrl" style="width: 200px; height: 200px;"></el-image>
  </div>
</template>

<script>
export default {
  data() {
    return {
      uploadURL: '上传图片的地址',
      imageUrl: ''
    }
  },
  methods: {
    handleSuccess(response) {
      // 上传成功的回调函数
      this.imageUrl = response.imageUrl;
    }
  }
}
</script>

<style scoped>
.el-upload {
  width: 200px;
  height: 200px;
}
</style>

请注意，上述代码仅为示例，你需要根据实际需求进行适当修改。

vue elementui上传图片并显示

可以使用 ElementUI 的 Upload 组件来实现图片上传并显示。具体步骤如下：

1. 在 Vue 组件中引入 Upload 组件：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-api"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      list-type="picture-card">
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: []
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      // 上传成功后的回调函数
      console.log(response);
    },
    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>

2. 在 handleSuccess 回调函数中，将上传成功后的图片地址保存到 fileList 中：

handleSuccess(response, file, fileList) {
  // 上传成功后的回调函数
  console.log(response);
  this.fileList.push({
    name: file.name,
    url: response.data.url
  });
}

3. 在模板中使用 v-for 循环遍历 fileList，将图片显示出来：

<template>
  <div>
    <el-upload
      class="upload-demo"
      action="/your-upload-api"
      :on-success="handleSuccess"
      :before-upload="beforeUpload"
      :file-list="fileList"
      list-type="picture-card">
      <i class="el-icon-plus"></i>
    </el-upload>
    <div v-for="(item, index) in fileList" :key="index">
      <img :src="item.url" alt="">
    </div>
  </div>
</template>