PHPにてMySQLデータベース(mysqliからpdo接続変更)へ画像データ登録呼出し表示が出来ない。

Question

前提・実現したいこと

※1回目の質問でmysqliよりpdoを使ってくださいと指摘を頂き、
プログラム(3)zu200_select0.phpをpdo接続に変更しました。
然し、　　　どーしても画像が表示出来なくて...ご教授の程、
よろしくおねがいします。

PHPでMySQLデータベースへ画像データを保存して呼び出すプログラムを
作成しています。
テーブル内容
項# 名前　データ型
1 id int(5) AUTO_INCREMENT
2 imgdat mediumblob
3 mime varchar(15)
4 symd datetime
の構成になっています。画像データは約20KBぐらいを保存します。
プログラムは、
(1)EDIT.PHP ..... ファイルから画像を選びます。
(2)EDIT1.PHP .... データベースへ登録保存します。
(3)zu200_select0.php ... 一覧表示します。
(1)(2)の画像選択登録は出来ていますが、(3)一覧表示で画像が表示出来ません。
■（図－１）画像データの取込データベース保存

■（図－２）一覧表

発生している問題・エラーメッセージ

（図－２）一覧表で画像が表示されない?
画像データ(jpg)を、base64_encode($img)保存して、表示する時にbase64_decode($img)変換し
戻して表示するつもりでした。小さなアイコンの様な表示になってしまいます。
header('Content-Type: image/jpeg')を加えてみましたが、画面全体が真っ黒になってしまい
どの様に解決したら良いかわかりません。　よろしくお願いします。

該当のソースコード

//(1)EDIT.PHP ..... ファイルから画像を選びます。
<form enctype="multipart/form-data" action="./edit1.php" method="POST">
    <input type="hidden" name="MAX_FILE_SIZE" value="1500000">
    <input name="image" type="file">
    <p><input type="submit" name="save" value="Submit" /><p>
</form>

//(2)EDIT1.PHP .... データベースへ登録保存します。
if (!empty($_POST))
{
// 画像ファイル
    $fp = fopen($_FILES["image"]["tmp_name"], "rb");
    $imgdat = fread($fp, filesize($_FILES["image"]["tmp_name"]));
echo '(画像ファイル)$fp-->'.$fp."|"."<br>";
fclose($fp);
}
//
//画像処理
    $fp = fopen($_FILES["image"]["tmp_name"], "rb");
    $img = fread($fp, filesize($_FILES["image"]["tmp_name"]));
    fclose($fp);

//画像をbase64エンコード変換
$imgdat = base64_encode($imgdat);    
echo "画像をbase64エンコード変換:".$imgdat;
//
// 拡張子
    $dat = pathinfo($_FILES["image"]["name"]);
    $extension = $dat['extension'];
// MIMEタイプ
    if ( $extension == "jpg" || $extension == "jpeg" ) $mime = "image/jpeg";
    else if( $extension == "gif" ) $mime = "image/gif";
    else if ( $extension == "png" ) $mime = "image/png";
//    
//データベース接続定義
$dsn = 'mysql:dbname=shop;host=localhost;charset=utf8mb4';
$user = 'userid';
$password = 'userpassword';

try{
    $sql = new PDO($dsn, $user, $password);
}catch (PDOException $e){
    print('データベース接続Error:'.$e->getMessage());
    echo "<br>";
    echo '<button onclick=location.href="menu.html">';
    echo "メニュー戻り";
    echo '</button>';
    die();
}
echo "データベース接続しました。"."<br>";

//■insertレコードを挿入する
$stmt = $sql->prepare("INSERT INTO posts (
        imgdat,
        mime
        ) VALUES (
        :imgdat,
        :mime
        )");
 
// (4) 登録するデータをセット
$stmt->bindParam( ':imgdat', $imgdat, PDO::PARAM_STR);
$stmt->bindParam( ':mime', $mime, PDO::PARAM_STR);
//
// (5) SQL実行
$res = $stmt->execute();
// (6) データベースの接続解除
//$pdo = null;
//■メニュー戻り
echo '<button onclick=location.href="menu.html">';
echo "メニュー戻り";
echo '</button>';

?>
<img src="data:image/jpg;base64,<?php echo $imgdat; ?>">

//(3)zu200_select0.php ... 一覧表示します。
//■データベース接続
$dsn = 'mysql:dbname=shop;host=localhost;charset=utf8mb4';
$user = 'userid';
$password = 'userpassword';

try{
    $pdo = new PDO($dsn, $user, $password);
}catch (PDOException $e){
    print('データベース接続Error:'.$e->getMessage());
    echo "<br>";
    echo '<button onclick=location.href="menu.html">';
    echo "メニュー戻り";
    echo '</button>';
    die();
}
echo "データベース接続しました。"."<br>";

//■postsテーブルのselect全てのデータを取得する
echo "■database(shop)";
echo "<br>";
echo "■table id(posts)";
echo "<br>";
echo "[画像データテスト]一覧 (zu200_select0.php)";
print "<br>";

//select文設定
$sql = 'select '
        . 'id, '
        . 'imgdat, '
        . 'mime, '
        . 'symd '
        . 'from posts';
//クエリー
$sth = $pdo -> query($sql);
//配列セット
$aryItem = $sth -> fetchAll(PDO::FETCH_ASSOC); //$aryItemに配列を代入

//■一覧表作成
echo '<table>';
echo '<table border="1" style="background-color:#98fb98" >';
//ヘッダ見出し
echo '<tr style="background-color:#ff7f50" ><td>'.
'<font color=#000000>'.
'番号'.'</td><td><font color=#000000>'.
'画像データ'.'</td><td><font color=#000000>'.
'拡張子'.'</td></tr>';
 
foreach($aryItem as $row){
echo "<td>".$row['id']."</td>";
echo "<td>";

$img = $row['imgdat'];
$img64 = base64_decode($img);       //画像データbase64_encodeからbase64_decode変換処理
//
//header('Content-Type: image/jpeg');
// jpegファイルの場合
echo '<img src="data:images/jpeg;base64,$img64 ">';  
echo "</td>";
echo "<td>".$row['mime']."</td>";
echo "</tr>";
}
echo "<tr>";
echo "<td>"."=合計="."</td>";
echo "<td>".""."</td>";
echo "<td>".""."</td>";
echo "</tr>";
echo '</table>';
 
//■接続を閉じます
mysqli_close($sql);
//■メニュー戻り
echo '<button onclick=location.href="menu.html">';
echo "メニュー戻り";
echo '</button>';
 
?>

試したこと

画像をbase64エンコード変換してmediumblobに格納しています。
$imgdat = base64_encode($imgdat);
登録されている様に見えていますが、こちらが問題なのか?
また、表示プログラムでは、base64デコード変換をし戻しています。
$img64d = base64_decode($row['imgdat']);
登録の問題か?読込変換の問題か?表示する手法の問題か?
わからなく....よろしくお願いします。

補足情報（FW/ツールのバージョンなど）

MySQL5.7.34
ここにより詳細な情報を記載してください。

Comments

[yambejp]

ソース提示の際はマークダウンしてください

[duli3041]

テンプレートに併せて見ました。よろしくお願いします。

Answer 1

解決できました。
mysqliでもpdoでもどちらでも良かったです。画像データをmediumblob型で
準備して、$imgdat = base64_encode($imgdat);エンコードを掛けて保存。
次にselect文で呼出し(全件でも、where条件付きでも)変数に格納します。
後は下記内容で画像を表示します。
<img src="data:image/png;base64,<?php echo $img; ?>">
注意:PHP内部では表示出来ませんでした。htmlに切り替えて上記をセットし
必要であればPHPに戻してあげれば継続した処理に繋がります。

<こんな感じ>

<画像データの扱い方>
1.mYsqlデータベースのテーブル型はblobとかmediumblob型にします。
2.ファイルからの取込はformでenctype="multipart/form-data"を使い受渡します。
3.mysqlへ書込みは、画像をbase64エンコード変換します。
$imgdat = base64_encode($image_data);
4.画像の表示は、上記に記載した通りslect文で抽出し変数にセットした後、htmlで、
<img src="data:image/png;base64,<?php echo $img; ?>">を記載するだけで
画像表示が出来ました。

<解決出来なかった事>
はじめは、こんな感じで画像表示出来ないかと悩んでいました。
例) echo '<img src="data:image/png;base64,<?php echo $img; ?>">';
これだとPHP内部でhtmlを呼出し処理する内容で良いと思っていましたが...
この内容だと上手くいきません。
単純に、?>でphpを終了してechoを外したhtml環境で<img scr...を実行するだけで
画像表示できました。

Answer 2

prepareでデータの投入をしてください
できればpdoでやったほうが参考になるサイトも多いと思います

Comments

[duli3041]

回答有難うございます。
データベース接続にmysqliとpdoが有りますが、mysqliをずっと使っていて..．。
mysqliでprepareを使う参考は無いでしょうか?
また何故幾つも手法が有るのか? pdo接続が良いのは参考資料が多いからなのでしょうか?
アドバイス有難うございます。

[yambejp]

https://www.php.net/manual/ja/mysqli.prepare.php

mysqliは旧mysql_*の手続き型の継承ですから、古いシステムのリストラクションには有効ですが
オブジェクト型を使うならPDOのほうがアクセスしやすいしオプションも使いやすいです
なによりWEB上で参考サイトが多くてトラブルに強いと言えます

[duli3041]

有難うございます。
pdo接続を勉強します。

[yambejp]

「まだ回答を求めています」設定されたようですが
prepareで処理することは諦めたのでしょうか？
バイナリデータを扱う限りprepareは避けて通れませんよ