uniapp页面image图片加载base64失败

最新推荐文章于 2025-06-19 09:36:08 发布

IT全栈视野

最新推荐文章于 2025-06-19 09:36:08 发布

阅读量5.6k

点赞数 1

CC 4.0 BY-SA版权

文章标签： uni-app 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_60459392/article/details/128217204

本文介绍了解决Uniapp中使用Base64格式图片加载失败的问题，主要是因为Base64字符串过长且含有换行符导致的。通过自定义过滤方法去除换行符，确保图片可以正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>