uniapp显示base64图片
时间: 2023-11-01 20:07:24 浏览: 125
可以使用uniapp内置的组件`uni-image`来显示base64图片。具体实现方法如下:
1. 在`<template>`中使用`uni-image`组件,并绑定`src`属性为base64字符串:
```
<uni-image src="data:image/png;base64,iVBORw0KG..." mode="widthFix"></uni-image>
```
2. 注意:在绑定`src`属性时,需要在base64字符串前加上`data:image/png;base64,`,其中`image/png`表示图片格式,可以根据实际情况进行修改。
相关问题
uniapp显示base64格式的图片
要在Uniapp中显示base64格式的图片,可以使用uni-image组件。以下是一个示例代码:
```html
<template>
<view>
<uni-image :src="imgUrl"></uni-image>
</view>
</template>
<script>
export default {
data() {
return {
imgUrl: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAABVklEQVRIS+2UwQrAIAxF2z//6UuW6Qd5QbYC5cN3Jq9alEKW5Dl7n+5pGJnkslRnrRJdZ/Vf0/UeRbG0cX1RQ2OJt+3Eo3vz8Kk+o0P7O4JF4jv4Xg4ZlYSiG4J1CkSvQL8fzWItGJdAe0nJMcjKZj8XQ1Q2lEJ+D3tqLzjKzKY+M4Fm4v4K4jZ8Xz+TmL/HfJvKkAAAAASUVORK5CYII='
}
}
}
</script>
```
在上面的代码中,我们使用`uni-image`组件,并将base64格式的图片赋值给`src`属性。需要注意的是,`src`属性的值必须以`data:`开头,并且包含图片的格式和编码方式(在本例中,图片格式为png,编码方式为base64)。
运行该代码,即可在页面上显示出base64格式的图片。
uniapp base64转图片显示
你可以通过uniapp自带的base64解码方法将base64字符串转换成二进制数据,然后使用uniapp提供的Image组件进行显示。具体实现方法如下:
1. 使用uniapp提供的Base64.js文件中的方法解码,代码示例:
```
import base64 from '@/common/uniapp-base64.js'
let base64Str = 'data:image/png;base64,xxxxxxxxxx'; // base64字符串
let blob = base64.toBlob(base64Str);
let url = URL.createObjectURL(blob);
```
2. 在页面中使用Image组件显示图片,代码示例:
```
<template>
<div>
<image :src="imgUrl" />
</div>
</template>
<script>
export default {
data() {
return {
imgUrl: ''
}
},
mounted() {
let base64Str = 'data:image/png;base64,xxxxxxxxxx'; // base64字符串
let blob = base64.toBlob(base64Str);
this.imgUrl = URL.createObjectURL(blob);
}
}
</script>
```
注意:在使用完URL.createObjectURL方法后,需要手动释放URL对象,可以在组件销毁前调用URL.revokeObjectURL方法释放URL对象。
相关推荐
![js](https://img-home.csdnimg.cn/images/20210720083646.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)