el-image的src赋值了一个接口中返回的图片地址,为什么接口请求了两次呢?
el-image的src赋值了一个接口中返回的图片地址,为什么接口请求了两次呢?
给el-iamge设置key和更改lazy的状态都没有区别,还是加载了两次
currentPicture初始是null,是通过接口拿到图片完整地址进行赋值的
回复
1个回答

test
2024-06-20
搭了个 Demo 测试了一下,这应该算是一个已知问题 Element UI #19712。
引起这个问题的原因是在组件内部,根据 loading 的变化,使用 v-if
来控制了 img 标签和占位图片的显示与隐藏,使得 Vue 重新渲染了组件。
当 el-image 加载完图片后,会调用内部的 handleLoad 方法来修改 loading 的值。
从而导致了重新渲染。
等效于下面的代码:
<div id="b1">
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="">
</div>
<script>
setTimeout(() => {
const image = new Image();
const src = 'https://i.imgur.com/xUbINne.png';
image.src = src;
image.onload = function () {
b1.innerHTML = `<img src="${src}">`;
};
}, 1000);
</script>
上面这个说法有点问题,主要还是因为加载方式的原因,el-image 会先在 js 代码中使用 new Image 的形式去加载一次图片,这就是第一个请求。而第二个请求则 Vue 在渲染 img 标签的时候触发的,这也应当是符合预期的。
其实如果你看了上面的 issues ,你就会发现,如果在 Devtools 中的 Network 面板上取消了 Disable cache
就只会有一条加载,正如另一个回答中的不能复现问题一样。
解决办法:暂无
一般来说,你可以不用关心,因为实际生产中,图片资源都会配置缓存策略,正常浏览时不受影响的。
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容