Vue中插入base64图片实现方式

更新时间：2026年05月15日 09:27:00 作者：合衬i

文章主要讲述了在Vue中插入base64图片的方法,包括在模板中写入img标签、在methods中写入事件以及调用后端接口,作者分享了个人经验,希望能为读者提供参考

Vue插入base64图片

1.template模板中写入img标签

 <!-- base64图片 -->
 <img :src="formLabelAlign.deptPic" />

2.methods中写入事件

cargoinfo.examineshow({ id: row.id }).then((response) => {
   if (response.status == 200) {
      this.formLabelAlign = response.data;
      this.formLabelAlign.deptPic = `data:image/png;base64,${response.data.deptPic}`;
   }
});

3.调后端接口

// 下载预览
function examineshow(params) {
    return request({
        url: `/epidemic/examine/show`,
        method: 'get',
        params
    })
}

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

VueCli4项目配置反向代理proxy的方法步骤
这篇文章主要介绍了VueCli4项目配置反向代理proxy的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
Vuex中的getter和mutation的区别详解
在现代前端开发中,状态管理是一个不可忽视的话题,而Vuex作为Vue.js的官方状态管理库,在大型应用中扮演着至关重要的角色,当我们使用Vuex进行状态管理时,getter和mutation是两个重要的概念,在本文中,我们将详细探讨getter和mutation的区别,需要的朋友可以参考下
2024-12-12
在vue中嵌入外部网站的实现
这篇文章主要介绍了在vue中嵌入外部网站的实现方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue过滤器,生命周期函数和vue-resource简单介绍
这篇文章主要介绍了Vue过滤器,生命周期函数和vue-resource简单介绍，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下
2021-01-01
vue2基本响应式实现方式之让数组也变成响应式
这篇文章主要介绍了vue2基本响应式实现方式之让数组也变成响应式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
详解Vue.js v-for不支持IE9的解决方法
这篇文章主要介绍了详解Vue.js v-for不支持IE9的解决方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
vuex 中插件的编写案例解析
Vuex 的 store 接受 plugins 选项，这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数，这篇文章主要介绍了vuex 中插件的编写案例,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-06-06
Element--el-tabs固定在顶部问题
这篇文章主要介绍了Element--el-tabs固定在顶部问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
Vue实现下拉表格组件
这篇文章主要为大家详细介绍了Vue实现下拉表格组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
使用vue初用antd 用v-model来双向绑定Form表单问题
这篇文章主要介绍了使用vue初用antd 用v-model来双向绑定Form表单问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04