将来自Mysql数据库的BLOB图像显示在html中的动态div中 [英] Displaying BLOB image from Mysql database into dynamic div in html
问题描述
当用户提交广告表单时，我有一个BLOB图片，他们可以选择上传一张图片。该图片与其他信息一起存储在数据库中。
每当我的页面加载它时，它都会动态创建广告div，并将匹配信息从我的数据库填充到DIV。
我遇到的问题是同时显示包括图片在内的所有信息，所以当用户点击查看页面时，他们会看到每个div都有不同的图片，信息。我已经看到了关于如何显示图像的其他帖子，但是当你显示来自同一个数据库的几张图像时，我怀疑它是同样的方法。
我的数据库是设置如下：
ID
ADTITLE
电子邮件
价格
描述
类别
名称
类型
大小
内容
DATE
粗体变量用于图像/ 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'];
$日期= $ row ['DATE'];
$ timestamp = strtotime（$ Date）;
$ Day = date（d，$ timestamp）;
$月份=日期（F，$ timestamp）;
$ Newmonth = date（'M'，strtotime（$ Month。'01'））;
$年份=日期（Y，$ timestamp）;
header（'Content-type：image / jpeg'）;
$图片= $ 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'>全天< / span>
< / time>
< img alt ='＃'src ='$图片/>
< div class ='info'>
< h2 class ='title'> $ Adtitle< / h2>
< p class ='desc'> ; $ Desc< / p>
< ul>
< li style ='width：50％;'>< span class ='fa fa-money'>< / span> $价格< /锂>
< / ul>
< / div>
< / li>
< / ul>
< / div>
;
我的PHP技巧仍然是初学者级别，我只是尝试为了让事情尽可能简单明了，我会在稍后讨论其他方法。
所有帮助表示感谢。
谢谢
1）Base64选项
使用一行代码 image / png 用于一个PNG图像， image / jpeg 用于一个jpg文件：
echo'< img src =data：image / png; base64，'。base64_encode（$ blob）。'/>';
$ b $例如：
< div style =背景色：黑色;文本对齐：中心;填充：5px的; >< IMG SRC = 数据：图像/ PNG; BASE64，iVBORw0KGgoAAAANSUhEUgAAADIAAAAwBAMAAACh2TSJAAAALVBMVEUAAADtNTX //// 3N5 / + 9fX719f7zMz5tLTzfHzuQED // f31jY3ybGzxXV3wVFRaxp + rAAAAAXRSTlMAQObYZgAAALVJREFUOMut0rENAjEQRNHdC4kY0QBaAQUQX0QAFSAKIKQEKiAA6VqgIkriApuV1x7pQPz0aWwHljLMpZ0CRDBGoXmeghGYKFJsUo90giAImCgV5OJF + oOgKE48MlGgs2VLBIunWesw0a1ZHqF82c7GmmIfUSpgotOly29DFPFJFDEhkgIT / V5mZuvj6XofKrHU6vyI4u37IYi36aN4h5tL7PJyif1dvCgEpapzISbCTEj5R78BZq5A5Ldh2XYAAAAASUVORK5CYII>< / DIV>
$ b 2）专用页面
/ h1>
在同一页面上有很多大图，base64可能不是好选择
Base64很酷，但有点沉重（通常是编码的二进制值的两倍），不能被缓存浏览器，因为它是页面的一部分，而不是页面本身（如图片）。
在这种情况下，最好的方法是使用特定php页面显示你的图片：
在主页面上使用而不是base 64： echo'< img src =image.php？ id ='。$ id。'/>'; 与您想要图片的行的id。
code> image.php
，对于基本的你应该使用这个：
$ $ p $ // <<在这里包含$ pdo
$ 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'];
}
I have a BLOB image that is stored when the user submits an advert form, they have the choice of uploading one image. The image is stored in the database with the other information.
Every time my page loads it dynamically creates the advert divs and also fills in the matching information from my database into the div.
The problem I have is displaying all the information including the image together at the same time so when the user clicks to view the page they see each div with a different picture and information. I've seen the other posts on how to display the image but I doubt its the same method when you're displaying several images from the same database.
My database is set up as follows:
ID
ADTITLE
EMAIL
PRICE
DESCRIPTION
CATEGORY
name
type
size
content
DATE
The bold variables are for the image/blob
Here is my code where I retrieve the information :
$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>
";
My php skills are still beginner levels as well. I'm just trying to keep things as plain and simple as possible, i'll look into other methods abit later.
All help is appreciated.
Thanks
解决方案 1) Base64 option
Work with a single line, image/png for a png image and image/jpeg for a jpg one :
echo '<img src="data:image/png;base64,'.base64_encode($blob).'"/>';
example :
<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) Dedicated page
With many big picture on the same page, the base64 may be not the good choice
Base64 is cool, but a bit heavy (usually around twice as the binary value encoded) and can't be cached by the browser as it's a part of the page, and not a page by itself (like a picture).
In this case, the best is to use a specific php page to display your picture :
On the main page use instead of base 64 : echo '<img src="image.php?id='.$id.'"/>'; with the id of the line you want the image.
On your image.php, for the basic you should use this :
// << 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'];
}
这篇关于将来自Mysql数据库的BLOB图像显示在html中的动态div中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
