如何在元素ui中预览图像？

【问题标题】：How to preview image in element ui?如何在元素ui中预览图像？
【发布时间】：2021-02-01 22:59:37
【问题描述】：

我正在使用元素 ui el-image。我想在单击 (:preview-src-list) 时预览我的图像。但是当我第一次单击时，它不会预览任何内容。只需添加我下载的图像。所以我需要点击2次。但是我想点击1次。

这是我的模板代码：

<el-image :src="src"
          :preview-src-list="srcList"
          @click="imgClick"></el-image>

ts 代码：

src = null;
srcList = [];

product = 'shoe1';

imgClick() {
  prevImg(product).then(resp => {
    const url = window.URL.createObjectURL(new Blob([resp.data]));
    this.srclist = [url];
  });
}

@Watch("product")
changed(value) {
  getProductImage(value).then(resp => {
    const url = window.URL.createObjectURL(new Blob([resp.data]));
    this.src = url;
  }).catc(e => {
    alert(e);
  });
}

mounted() {
  this.changed(product);
}

【问题讨论】：

标签： vue.js vuejs2 vue-component element-ui

【解决方案1】：

我认为这些事情会发生，因为当您单击该图像时，它会触发clickHandler：

...
  clickHandler() {
    // don't show viewer when preview is false
    if (!this.preview) {
      return;
    }
    ...
  }
...

来自source

preview 是计算属性：

...
  preview() {
    const { previewSrcList } = this;
    return Array.isArray(previewSrcList) && previewSrcList.length > 0;
  }
...

来自source

所以第一次点击什么也没发生，但之后你设置preview-src-list并再次点击它就可以了。

如果你的代码是同步的，你可以使用像mousedown这样的事件，它会在click事件之前触发。

<el-image
  :src="url"
  :preview-src-list="srcList"
  @mousedown="loadImages">
</el-image>

Example

但如果您的代码是异步的，您可以使用 refs 并在此之后调用 clickHandler。

...
  // fetch something
  this.$nextTick(() => {
    this.$refs.elImage.clickHandler()
  })
...

Example

【讨论】：