el-image的src赋值了一个接口中返回的图片地址,为什么接口请求了两次呢?

作者站长头像
站长
· 阅读数 27

el-image的src赋值了一个接口中返回的图片地址,为什么接口请求了两次呢?el-image的src赋值了一个接口中返回的图片地址,为什么接口请求了两次呢?

el-image的src赋值了一个接口中返回的图片地址,为什么接口请求了两次呢?

给el-iamge设置key和更改lazy的状态都没有区别,还是加载了两次

currentPicture初始是null,是通过接口拿到图片完整地址进行赋值的

回复
1个回答
avatar
test
2024-06-20

搭了个 Demo 测试了一下,这应该算是一个已知问题 Element UI #19712

answer image

引起这个问题的原因是在组件内部,根据 loading 的变化,使用 v-if 来控制了 img 标签和占位图片的显示与隐藏,使得 Vue 重新渲染了组件。

answer image

当 el-image 加载完图片后,会调用内部的 handleLoad 方法来修改 loading 的值。

answer image

从而导致了重新渲染。

等效于下面的代码:

<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 就只会有一条加载,正如另一个回答中的不能复现问题一样。


解决办法:暂无

一般来说,你可以不用关心,因为实际生产中,图片资源都会配置缓存策略,正常浏览时不受影响的。

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