如何解决如何在元素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>
但是,如果您的代码是异步的,则可以使用引用并在此之后调用clickHandler
。
...
// fetch something
this.$nextTick(() => {
this.$refs.elImage.clickHandler()
})
...
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。