将Mysql数据库中的BLOB图像显示到html中的动态div中

Posted 2023-02-24

【中文标题】将Mysql数据库中的BLOB图像显示到html中的动态div中

【英文标题】：Displaying BLOB image from Mysql database into dynamic div in html

【发布时间】：2016-03-10 17:54:57

【问题描述】：

我有一个 BLOB 图像，当用户提交广告表单时存储，他们可以选择上传一张图像。图像与其他信息一起存储在数据库中。

每次我的页面加载时，它都会动态创建广告 div，并将我的数据库中的匹配信息填充到 div 中。

我遇到的问题是同时显示包括图像在内的所有信息，因此当用户单击查看页面时，他们会看到每个 div 具有不同的图片和信息。我看过其他关于如何显示图像的帖子，但是当您显示来自同一数据库的多张图像时，我怀疑它的方法是否相同。

我的数据库设置如下：

身份证 标题 电子邮件 价钱 描述 类别 名称 类型 尺寸 内容 日期

粗体变量用于图像/blob

这是我检索信息的代码：

$Category = 'Specials'; 
$query = $pdo->prepare("SELECT * FROM adsubm WHERE CATEGORY LIKE '%$Category%' ORDER BY DATE DESC" );
$query->execute();

while($row = $query->fetch()) 
    $Adtitle=$row['ADTITLE'];
    $Desc=$row['DESCRIPTION'];
    $Price=$row['PRICE'];
    $Date=$row['DATE'];
    $timestamp=strtotime($Date);
    $Day= date("d",$timestamp);
    $Month=date("F",$timestamp);
    $Newmonth=date('M', strtotime($Month . '01'));
    $Year=date("Y",$timestamp);
    header('Content-type: image/jpeg');
    $Image=$row['content'];


echo  " 
           <div class='[ col-xs-12 col-sm-offset-2 col-sm-8 ]' style='margin-top: 10px'>
                <ul class='event-list'>
                    <li>
                        <time datetime='$Date'>
                            <span class='day'>$Day</span>
                            <span class='month'>$Newmonth</span>
                            <span class='year'>$Year</span>
                            <span class='time'>ALL DAY</span>
                        </time>
                        <img alt='#' src='$Image/>
                        <div class='info'>
                            <h2 class='title'>$Adtitle</h2>
                            <p class='desc'>$Desc</p>
                                                        <ul>
                                <li style='width:50%;'><span class='fa fa-money'></span>  $Price</li>
                            </ul>
                        </div>

                    </li>
                              </ul>
                    </div>
        ";

我的 php 技能还处于初级水平。我只是想让事情尽可能简单明了，稍后我会研究其他方法。

感谢所有帮助。 谢谢

【问题讨论】：

那么你的图片是存储在db中的吗？那就看看***.com/questions/2329364/…

@maxhb 我可以这样做吗： $Image = data:image/png;base64,'.base64_encode(file_get_contents('image.png'));然后就回声吗？

不，更多 $Image = 'data:image/png;base64,'.$blob ; 其中$blob 是图像

AFAI 理解 $Image 应该包含图像文件，所以只需这样做： echo 'data:image/png;base64,'.base64_encode($Image);

并删除 header('Content-type: image/jpeg');

【参考方案1】：

1) Base64 选项

使用单行，image/png 用于 png 图像，image/jpeg 用于 jpg 图像：

echo '<img src="data:image/png;base64,'.base64_encode($blob).'"/>';

示例：

<div style="background-color:black; text-align:center; padding: 5px;">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAwBAMAAACh2TSJAAAALVBMVEUAAADtNTX////3n5/+9fX719f7zMz5tLTzfHzuQED//f31jY3ybGzxXV3wVFRaxp+rAAAAAXRSTlMAQObYZgAAALVJREFUOMut0rENAjEQRNHdC4kY0QBaAQUQX0QAFSAKIKQEKiAA6VqgIkriApuV1x7pQPz0aWwHljLMpZ0CRDBGoXmeghGYKFJsUo90giAImCgV5OJF+oOgKE48MlGgs2VLBIunWesw0a1ZHqF82c7GmmIfUSpgotOly29DFPFJFDEhkgIT/V5mZuvj6XofKrHU6vyI4u37IYi36aN4h5tL7PJyif1dvCgEpapzISbCTEj5R78BZq5A5Ldh2XYAAAAASUVORK5CYII">
</div>

---

2) 专用页面

同一个页面有很多大图，base64可能不是很好的选择

Base64 很酷，但是有点重（通常是 二进制编码值的两倍左右）并且 不能被缓存浏览器，因为它是页面的一部分，而不是页面本身（如图片）。

在这种情况下，最好是使用特定的php页面来显示你的图片：

在主页上使用而不是 base 64 ：echo '<img src="image.php?id='.$id.'"/>'; 与您想要图像的行的 id。

在你的image.php 上，你应该使用这个：

// << include the $pdo here
$query = $pdo->prepare("SELECT `content` FROM `adsubm` WHERE `id` = :id" );
$query->execute(array(':id'=>$_GET['id']));
$data = $query->fetch();

if(empty($data)))
    header("HTTP/1.0 404 Not Found");
else 
    header('Content-type: image/jpeg');
    echo $data['content'];