大型企业网站优化网页设计与制作实践

如果后端返回的直接就是一个图形，有以下几种方式展示

一、直接在img标签里面的src里面调用接口

<img :src="dialogSrc" class="photo" alt="验证码图片" @click="changeDialog">

let orgUrl = "/api/captcha"  //你的接口地址
let dialogSrc = ref(orgUrl); //为啥不直接用orgUrl,是因为下面那个方法加上一个随机数
//点击图片刷新验证码
const changeDialog = () => {dialogSrc.value = `${orgUrl}?${Math.random()}`
}

二、把二进制流转换为图片

  <imgid="kaptcha_img"src=""alt="验证码图片"class="photo"@click="getKaptcha"/>

   getKaptcha().then((res) => {  //接口地址返回let kaptcha_img = document.getElementById("kaptcha_img");let imageType = res.headers["content-type"];  //获取图片的格式const blob = new Blob([res.data], { type: imageType });const imageUrl = URL.createObjectURL(blob);kaptcha_img.src = imageUrl;kaptcha_img.onload = () => {URL.revokeObjectURL(imageUrl); //释放URL.createObjectURL()创建的对象};});