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

Question

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

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

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

Answer 1

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

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

• element/packages/image/src/main.vue at dev · ElemeFE/element · GitHub

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

---

解决办法：暂无

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

Answer 2

跟el-image应没关系，否则早就被人提issue了，得看看你代码其余部分做了什么。

我也跑去验证了下，没有你的那种情况，初始发起了null用v-if处理下就好了。

v-if处理后：