Vue3 中实现图片加载失败后自动重试

在开发 Web 应用时，我们经常需要处理图片加载失败的情况，比如网络不稳定或者服务器出问题。这篇文章在 Vue3 中实现图片加载失败后自动重试，确保图片最终能够显示出来。

 	<div>
		<img :src="url" @error="reloadImage" @load="successImg()" alt="" />
	</div>

	const url= ref<string>("");

	function successImg() {
	  var imgObj = new Image();
	  imgObj.src = url.value;
	  if (imgObj.complete) {
	  	// 加载成功,可以在此处做一些其他操作
	  	
	  }
	}
	
	function reloadImage() {
	  // 添加一个时间戳参数到图片URL上, 使每次请求都看起来像一个不同的URL，从而迫使浏览器重新加载图片。
	  url.value = url.value.replace(/\?.*$/, "");
	  url.value = `${url.value}?timestamp=${new Date().getTime()}`;
	}	

通过以上的操作 就可以确保图片最终能够显示出来！