在web开发中，有时我们需要将图片以base64编码的形式存储在数据库中，并在网页上进行显示。这种方法尤其适用于小型图片或需要将图片与html/css/js打包在一起的场景。然而，如果不了解base64图像在html中的正确使用方式，很容易遇到图像无法显示的问题。本教程将通过一个具体的案例，指导您如何正确地从mysql数据库中提取base64编码的图像数据，并在html页面中显示。

问题场景分析

假设您正在开发一个Web页面，它需要从MySQL数据库中获取由Arduino板上传的Base64编码图片。数据库中有一个名为video的表，其中Video列存储了Base64编码的图像数据，格式为data:image/jpeg;base64,/9j/...。

初始尝试的代码可能类似于以下结构：

    
        
    
    
        
        @@##@@>
        
    

这段代码存在几个关键问题，导致图片无法正确显示：

1. *不必要的`SELECT ：** 查询SELECT *会返回表中所有列的数据，即使我们只需要Video`列。这增加了数据传输量，也使得后续处理复杂化。
2. 错误的数组处理： implode($row)会将mysqli_fetch_array返回的整个数组（可能包含ID和Video两列）连接成一个字符串。这会破坏Base64图像数据的完整性。
3. 错误的字符串截取： substr(implode($row),4,-1)尝试截取字符串，这对于已经损坏的Base64数据更是雪上加霜。4,-1的偏移量和长度也与预期的data:image/jpeg;base64,前缀不符。
4. 重复的Base64编码： 最关键的问题是base64_encode(...)。数据库中存储的图像数据已经是以Base64编码并带有MIME类型前缀的完整data:URI格式。浏览器可以直接识别这种格式。再次对其进行base64_encode会导致数据被双重编码，浏览器无法解析。

正确的解决方案

解决问题的核心在于理解Base64图像的data:URI格式，并确保从数据库中检索到的数据能够直接用于标签的src属性。

立即学习“PHP免费学习笔记（深入）”；

1. 优化数据库查询

首先，我们应该只查询需要的数据列，即Video列。

Napkin AI

Napkin AI 可以将您的文本转换为图表、流程图、信息图、思维导图视觉效果，以便快速有效地分享您的想法。

下载

$img = mysqli_query($conexion, "SELECT Video FROM video ORDER BY ID DESC LIMIT 1");

2. 正确获取Base64数据

mysqli_fetch_array()函数会返回一个包含行数据的数组。由于我们只查询了Video一列，该列的数据将位于数组的第一个索引（即0）处。

$row = mysqli_fetch_array($img);
$base64Image = $row[0]; // 获取Base64图像数据

3. 在HTML中直接显示图像

获取到的$base64Image变量已经包含了完整的data:image/jpeg;base64,...格式。我们只需将其直接输出到标签的src属性中即可。

@@##@@'>

请注意，src属性的值应该用单引号或双引号包裹，以确保HTML属性的正确性。

完整示例代码

以下是经过修正后的完整PHP和HTML代码：

    
    
        
        
        
        
         
    
    
        
Cámara del Portero
        

        
        @@##@@'>
        

        

        
            
        
    

关键点与注意事项

1. Base64数据格式： 确保数据库中存储的Base64字符串是完整的data:image/[MIME_TYPE];base64,[BASE64_STRING]格式。data:前缀和正确的MIME类型（如image/jpeg、image/png）是浏览器识别和渲染图像的关键。
2. 性能考量： Base64编码会使图像数据量增大约33%。对于大量或尺寸过大的图像，直接在HTML中嵌入Base64数据可能会导致页面加载缓慢，影响用户体验。在这种情况下，更推荐将图像作为文件存储在服务器上，数据库只保存文件路径，然后在HTML中引用文件路径。
3. 安全性： 虽然直接输出Base64图像数据通常不会引起跨站脚本（XSS）攻击，但在处理任何用户输入的数据时，始终建议进行适当的清理和验证，以防范潜在的安全风险。
4. MIME类型匹配： 数据库中存储的MIME类型（例如data:image/jpeg;中的jpeg）应与实际图像类型一致。如果存储的是JPEG但前缀是data:image/png;，浏览器可能无法正确显示图像。
5. 自动刷新： 示例代码中的标签会使页面每2秒自动刷新。这在某些实时监控（如摄像头画面）的应用场景中可能很有用，但在大多数情况下应谨慎使用，因为它会消耗服务器资源并可能干扰用户操作。
6. 错误处理： 示例代码中已添加了基本的数据库查询错误检查。在实际生产环境中，务必添加更完善的错误处理机制，例如检查mysqli_connect_error()和mysqli_error()，以提高应用的健壮性。

总结

通过正确理解Base64图像的data:URI格式，优化数据库查询以仅检索所需数据，并直接将获取到的Base64字符串输出到HTML 标签的src属性中，可以有效解决从MySQL数据库显示Base64编码图像的问题。同时，考虑到性能和安全性，对于大型或高流量的图像，应评估Base64嵌入的适用性，并考虑采用文件存储的替代方案。