el-image的src赋值了一个接口中返回的图片地址，为什么接口请求了两次呢？-灵析社区
半寸时光爱思考el-image的src赋值了一个接口中返回的图片地址，为什么接口请求了两次呢？   给el-iamge设置key和更改lazy的状态都没有区别，还是加载了两次 currentPicture初始是null，是通过接口拿到图片完整地址进行赋值的
我买了30万的鞋子搭了个 "Demo" (https://jsfiddle.net/q1jfnokL/) 测试了一下，这应该算是一个已知问题 "Element UI
#19712" (https://link.segmentfault.com/?enc=alP4pQRrLkPLSJWhcA1tdA%3D%3D.yqdRKWhXOU5z3yYl%2BLMQ3qAxoovF1Iinu6cUdDx0mIM2zteTCe2D8xem81Dwc5xt)。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/9e2384b145d293c24ec1cb2f7018c258.png)
引起这个问题的原因是在组件内部，根据 loading 的变化，使用 "v-if" 来控制了 img 标签和占位图片的显示与隐藏，使得 Vue
重新渲染了组件。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/14192292f0f48581edf4942ffc552541.png)
* "element/packages/image/src/main.vue at dev · ElemeFE/element · GitHub" (https://link.segmentfault.com/?enc=Bclv9gsFmkLBCzGFvQzJKw%3D%3D.LS9Cv6CuIvl59mgG3J8llUuZkmwQpWCsWpyxew9LRy%2BteRUQr6iYzGz%2F0HmXQnIPV59jCCOIVjJPR6%2Fo0IK9EmQpZcpKwEs29Dc26jekLkY%3D)
当 el-image 加载完图片后，会调用内部的 handleLoad 方法来修改 loading 的值。
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241007/5d9b3c2b3141c051f7d2413279a72fae.png)
从而导致了重新渲染。
等效于下面的代码：
setTimeout(() => {
const image = new Image();
const src = 'https://i.imgur.com/xUbINne.png';
image.src = src;
image.onload = function () {
b1.innerHTML = ``;
};
}, 1000);
上面这个说法有点问题，主要还是因为加载方式的原因，el-image 会先在 js 代码中使用 new Image
的形式去加载一次图片，这就是第一个请求。而第二个请求则 Vue 在渲染 img 标签的时候触发的，这也应当是符合预期的。
***
其实如果你看了上面的 issues ，你就会发现，如果在 Devtools 中的 Network 面板上取消了 "Disable cache"
就只会有一条加载，正如另一个回答中的不能复现问题一样。
***
解决办法：暂无
一般来说，你可以不用关心，因为实际生产中，图片资源都会配置缓存策略，正常浏览时不受影响的。