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

问题描述

我正在使用元素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);
}

解决方法

我认为发生这些事情是因为当您单击该图像时，它将触发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

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

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

Example