Vue3项目中验证码图片显示问题的解决方案

问题描述

在开发登录页面时，遇到了验证码图片无法显示的问题。后端返回的是PNG格式的图片数据，但在前端显示时出现了以下几种情况：

1.使用Blob URL时图片无法打开 2.在本地浏览器中无法访问图片 3.控制台显示图片地址但无法加载图片

初始解决方案（失败）

最初尝试使用arraybuffer 和 Blob 对象处理：

const getVerifyCode = async () => {
  try {
    const uuid = Date.now().toString()
    const res = await request({
      url: `/sys/auth/captcha?uuid=${uuid}`,
      responseType: 'arraybuffer',
      headers: {
        Accept: 'image/png'
      }
    })

    // 创建 blob
    const blob = new Blob([res.data], { type: 'image/png' })
    const url = URL.createObjectURL(blob)
    verifyCodeUrl.value = url
  } catch (error) {
    console.error('获取验证码失败:', error)
  }
}

这种方式存在以下问题：

1.Blob URL是临时的，只在当前会话有效

2.需要手动管理URL的创建和释放

3.容易造成内存泄露

4.处理过程较为复杂

成功的解决方案：

后来发现，可以直接使用后端接口地址作为图片源

const getVerifyCode = async () => {
  try {
    const uuid = Date.now().toString()
    loginForm.uuid = uuid
    
    // 直接使用后端接口地址
    verifyCodeUrl.value = `${import.meta.env.VITE_API_URL}/sys/auth/captcha?uuid=${uuid}`
  } catch (error) {
    console.error('获取验证码失败:', error)
    ElMessage.error('获取验证码失败，请刷新重试')
  }
}

为什么新方案可行？

1. 直接性：新方案直接使用后端API URL作为图片src，避免了中间的数据转换过程

2. 浏览器缓存：浏览器会自动处理图片的缓存和加载

3. 浏览器可以直接访问后端接口获取图片

验证码

预览：

响应：

转换的Blob 地址：