uniapp页面image图片加载base64失败,不显示,空白情况解决方法如下:

1.原因是base64太长有换行字符。

2.过滤掉即可,加一个方法过滤filterBase64

3.点赞收藏做笔记

<template>
	<view>
		<view class="content">
			<image class="codeImages" :src="base64Code" ></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				base64Code: '',
			}
		},
		onLoad(option) {
            let base64 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgA.....';
			this.base64Code = this.filterBase64(base64);
		},
		methods: {
			filterBase64(codeImages){
				return codeImages.replace(/[\r\n]/g, "");
			}
		}
	}
</script>

<style>
.codeImages {
	width: 400px;
	height: 400px;
}
</style>

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐