el-image src绑定图片在服务器的url,改url返回base64格式的图片,图片没有正常加载
时间: 2024-03-24 21:36:23 浏览: 230
图片url和base64位相互转换
3星 · 编辑精心推荐
如果你的服务器返回的是 Base64 格式的图片,并且你想在前端使用 `el-image` 组件来显示这张图片,可以考虑将 Base64 字符串直接绑定到 `src` 上。示例代码如下:
```html
<template>
<el-image :src="imageSrc"></el-image>
</template>
<script>
export default {
data() {
return {
imageSrc: ''
}
},
mounted() {
// 假设服务器返回的是 Base64 编码的图片字符串
const base64Image = 'data:image/png;base64,iVBORw0KG...';
this.imageSrc = base64Image;
}
}
</script>
```
需要注意的是,如果你的 Base64 编码的图片字符串比较长,可能会导致页面加载时间过长或者组件渲染速度变慢,建议对图片进行压缩或者使用其他方式来优化加载性能。
阅读全文