口碑好的做pc端網(wǎng)站/疫情最新政策最新消息
如果后端返回的直接就是一個(gè)圖形,有以下幾種方式展示
一、直接在img標(biāo)簽里面的src里面調(diào)用接口
<img :src="dialogSrc" class="photo" alt="驗(yàn)證碼圖片" @click="changeDialog">
let orgUrl = "/api/captcha" //你的接口地址
let dialogSrc = ref(orgUrl); //為啥不直接用orgUrl,是因?yàn)橄旅婺莻€(gè)方法加上一個(gè)隨機(jī)數(shù)
//點(diǎn)擊圖片刷新驗(yàn)證碼
const changeDialog = () => {dialogSrc.value = `${orgUrl}?${Math.random()}`
}
二、把二進(jìn)制流轉(zhuǎn)換為圖片
<imgid="kaptcha_img"src=""alt="驗(yàn)證碼圖片"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()創(chuàng)建的對(duì)象};});