Vue 3 中 Axios 处理 Base64 图片需后端返回纯 Base64 字符串，前端拼接 data:image/png;base64,${str} 后直接赋值 img src；须校验字符串有效性、避免重复前缀，并用 ref 响应式管理。
Vue 3 中 Axios 处理接口返回的 Base64 图片数据流，其实非常直接——前提是后端已将图片转为 Base64 字符串并随响应体返回（如 {"code":200,"data":"iVBORw0KGgo..."} ）。这种场景下，前端无需转换二进制，只需拼接 Data URL 即可使用。
确认后端返回的是纯 Base64 字符串
这是关键前提。检查响应结构，确保 data 字段内容是无前缀的 Base64 字符（不含 data:image/png;base64,），且长度明显符合 Base64 编码特征（长度为 4 的倍数、仅含 A–Z a–z 0–9 + / =）。例如：
- ✅ 正确示例：
"iVBORw0KGgoAAAANSUhEUgAA..." - ❌ 错误示例：
"data:image/jpeg;base64,iVBORw0KGgo..."（重复添加前缀会导致显示失败）
在 Vue 3 组合式 API 中安全赋值
使用 ref 或 reactive 存储图片 URL，注意拼接标准 Data URL 格式，并根据实际 MIME 类型选择后缀（常见有 png、jpg、gif）：
- 若后端明确告知类型（如返回
contentType: "image/jpeg"），优先用它动态拼接 - 若类型固定，可硬编码；若不确定，
image/png兼容性较好 - 务必对 Base64 字符串做基础校验，避免空值或乱码导致控制台报错
示例代码：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
import { ref, onMounted } from 'vue'
import request from '@/request' // 你的 axios 封装
const imgSrc = ref('')
onMounted(async () => {
try {
const res = await request.get('/api/qr-code')
const base64Str = res.data?.data
if (base64Str && typeof base64Str === 'string' && base64Str.length > 100) {
imgSrc.value = `data:image/png;base64,${base64Str}`
}
} catch (err) {
console.error('加载图片失败', err)
}
})
模板中绑定并处理加载状态
在 <template> 中使用 v-if 控制显示逻辑，配合占位或 loading 效果提升体验：
<img v-if="imgSrc" :src="imgSrc" alt="动态生成的图片" class="qrcode" /> <div v-else class="placeholder">图片加载中…</div>
注意：不要对 imgSrc 做二次 encode 或 decode；Base64 字符串本身已可直接用于 Data URL。
补充：如果后端返回的是二进制流（非 Base64）
那不属于“Base64 数据流”范畴，需改用 responseType: 'arraybuffer' 并手动转 Base64（用 Uint8Array + String.fromCharCode + btoa），但该情况与本题前提不符，此处仅作区分提醒。
