質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.12%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

解決済

phpのheader('Content-type')を使うと出力結果が真っ黒になる

7p0e2r1u
7p0e2r1u

総合スコア2

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

1回答

0グッド

0クリップ

190閲覧

投稿2022/11/14 01:26

前提

データベース(以下db)画像データを保存して表示するプログラムを製作中です。
現在、phpとdbを使って画像の[tmp_name]等をfile_get_contentsを使ってdbを保存した後、
header('content-type')を用いた後、echoで出力しようとしました。
しかし、結果としては
イメージ説明
上記のような結果となってしまい、画像が表示されませんでした
色々コメントアウトして調べた結果、この現象はheaderを使用した際に起こるようで、headerを外した場合、
イメージ説明
と結果が返っているので、dbから検索結果が返ってきている事は確かなのかなと考えています。
ただ、この先どうすればいいのかわからず手詰まりになってしまったので質問させていただきます。

実現したいこと

・dbから取得した画像データを使用してphpで画像の表示を行いたい。

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

・headerを使用すると画面が上記の真っ暗な画像の通りになる。
・headerを使用せずに出力すると文字化けしたデータが表示される。

該当のソースコード

使用した言語&フレームワーク
html
css
javascript
php
phpmyadmin
bootstrap

文字数の都合上入力+db保存は一部省略してます。

insertshohin.php

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>商品登録</title> 8 <style> 9 body{ 10 background-color: #e9e9e9; 11 } 12 .inputs{ 13 width:80%; 14 } 15 .fixText{ 16 padding-left:10%; 17 } 18 .card{ 19 border: 3px solid #000000; 20 border-radius: 15px; 21 } 22 #preview img { 23 width: 200px; 24 margin: 10px; 25 border: solid 1px silver; 26 } 27 </style> 28 <script> 29 30 </script> 31</head> 32<body> 33 <div class="card offset-3 col-6" style="padding-bottom:10%; "> 34 <h1 class="mt-5 mb-5 text-center">本の情報登録</h1> 35 <form action="insertShohinCheck.php" name="insertBookForm" method="post" enctype="multipart/form-data"> 36 <div class="fixText"> 37 <h6>画像<font color="#ff0000"></font></h6> 38 <input type="file" name="shohin_img[]" class="inputs" id="example" multiple><br/> 39 <!-- 👇ここにプレビュー画像を追加する --> 40 <div id="preview"></div> 41 <h6><font color="#ff0000">エラーメッセージをここに表示</font></h6> 42 <hr width="80%"><br/> 43 </div> 44 <div class="text-center"> 45 <input type="submit" value="登録" class="btn"> 46 </div> 47 </form> 48 </div> 49 <script> 50 function previewFile(file) { 51 const preview = document.getElementById('preview'); 52 const reader = new FileReader(); 53 reader.onload = function (e) { 54 const imageUrl = e.target.result; 55 const img = document.createElement("img"); 56 img.src = imageUrl; 57 preview.appendChild(img); 58 } 59 reader.readAsDataURL(file); 60 } 61 const fileInput = document.getElementById('example'); 62 const handleFileSelect = () => { 63 const files = fileInput.files; 64 for (let i = 0; i < files.length; i++) { 65 previewFile(files[i]); 66 } 67 } 68 fileInput.addEventListener('change', handleFileSelect); 69 </script> 70 //リンクのため以下省略 71</body> 72</html>

insertShohinCheck.php

1<?php 2 session_start(); 3 require_once "DBManager.php"; 4 require_once 'functions.php'; 5 $db = new DBManager; 6 try { 7 $id=$db->INSERTShohin($_POST['shohin_mei'],$_POST['bunrui'],$_POST['hanbai_bi'],$_POST['shohin_kakaku'],$_POST['shohin_writer'],$_POST['shohin_conpany'],$_POST['isbn'],$_POST['tosyo']); 8 9 if(!empty($_FILES['shohin_img'])){ 10 $db->INSERTShohinImg($id,$_FILES['shohin_img']['tmp_name'],$_FILES['shohin_img']['name'],$_FILES['shohin_img']['type'],$_FILES['shohin_img']['size']); 11 } 12 $shohin = $db->getShohin($id); 13 foreach ($shohin as $shohinData) { 14 15 } 16 } catch (Exception $e) { 17 echo $e.getMessage(); 18 } 19?> 20<!DOCTYPE html> 21<html lang="en"> 22<head> 23 <meta charset="UTF-8"> 24 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 25 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 26 //リンク省略 27 <title>商品登録の確認</title> 28</head> 29<body> 30 <div class="row"> 31 <div class="col-md-8 border-right"> 32 <ul class="list-unstyled"> 33 <?php for($i = 0; $i < $db->getShohinImgCount($id); $i++): ?> 34 <li class="media mt-5"> 35 <?php 36 $pdo = connectDB(); 37 $sql = 'SELECT * FROM shohindetails WHERE shohin_id = :shohin_id AND shohindetail_id = :shohindetail_id LIMIT 1'; 38 $stmt = $pdo->prepare($sql); 39 $stmt->bindValue(':shohin_id', $id, PDO::PARAM_INT); 40 $stmt->bindValue(':shohindetail_id', $i, PDO::PARAM_INT); 41 $stmt->execute(); 42 $image = $stmt->fetch(); 43 header('Content-type: ' . $image['image_type']); 44 echo $image['shohin_img']; 45 ?> 46 </li> 47 <?php endfor; ?> 48 </ul> 49 </div> 50 </div> 51<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 52</body> 53</html>

DBManager.php

1<?php 2class DBManager{ 3 private function dbConnect(){ 4 $pdo = new PDO('mysql:host=localhost;dbname=name;charset=utf8', 5 'name,'pass');//都合上一部変更してます 6 return $pdo; 7 } 8 function shohinIdSearch($name,$bunrui,$day,$kakaku){ 9 $pdo = $this->dbConnect(); 10 $search = $pdo->prepare("SELECT shohin_id FROM shohins WHERE shohin_mei=? AND shohin_bunrui=? AND hanbai_bi=? AND shohin_kakaku=?"); 11 $search->bindValue(1,$name,PDO::PARAM_STR); 12 $search->bindValue(2,$bunrui,PDO::PARAM_STR); 13 $search->bindValue(3,$day,PDO::PARAM_STR); 14 $search->bindValue(4,$kakaku,PDO::PARAM_INT); 15 $search->execute(); 16 $id=0; 17 foreach($search as $key){ 18 $id=$key['shohin_id']; 19 } 20 return $id; 21 } 22 function INSERTShohin($name,$bunrui,$day,$kakaku,$writer,$conpany,$isbn,$tosyo){ 23 $pdo = $this->dbConnect(); 24 $inS = $pdo->prepare("INSERT INTO shohins(shohin_mei,shohin_bunrui,hanbai_bi,shohin_kakaku) VALUES(?,?,?,?)"); 25 $inS->bindValue(1,$name,PDO::PARAM_STR); 26 $inS->bindValue(2,$bunrui,PDO::PARAM_STR); 27 $inS->bindValue(3,$day,PDO::PARAM_STR); 28 $inS->bindValue(4,$kakaku,PDO::PARAM_INT); 29 $inS->execute(); 30 $id = $this->shohinIdSearch($name,$bunrui,$day,$kakaku); 31 if(!empty($writer)){ 32 $upwri = $pdo->prepare("UPDATE shohins set shohin_writer = ? WHERE shohin_id = ?"); 33 $upwri ->bindValue(1,$writer,PDO::PARAM_STR); 34 $upwri ->bindValue(2,$id,PDO::PARAM_INT); 35 $upwri ->execute(); 36 } 37 if(!empty($conpany)){ 38 $upcon = $pdo->prepare("UPDATE shohins set shohin_conpany = ? WHERE shohin_id = ?"); 39 $upcon ->bindValue(1,$conpany,PDO::PARAM_STR); 40 $upcon ->bindValue(2,$id,PDO::PARAM_INT); 41 $upcon ->execute(); 42 } 43 if(!empty($isbn)){ 44 $upisb = $pdo->prepare("UPDATE shohins set shohin_ISBN = ? WHERE shohin_id = ?"); 45 $upisb->bindValue(1,$isbn,PDO::PARAM_INT); 46 $upisb ->bindValue(2,$id,PDO::PARAM_INT); 47 $upisb ->execute(); 48 } 49 if(!empty($tosyo)){ 50 $upcod = $pdo->prepare("UPDATE shohins set shohin_bookcode = ? WHERE shohin_id = ?"); 51 $upcod ->bindValue(1,$tosyo,PDO::PARAM_INT); 52 $upcod ->bindValue(2,$id,PDO::PARAM_INT); 53 $upcod ->execute(); 54 } 55 return $id; 56 } 57 function getShohin($id){ 58 $pdo = $this->dbConnect(); 59 $getShohin = $pdo->prepare("SELECT * FROM shohins WHERE shohin_id = ?"); 60 $getShohin->bindValue(1,$id,PDO::PARAM_INT); 61 $getShohin->execute(); 62 return $getShohin->fetchAll(); 63 } 64 65 function INSERTShohinImg($id,$content,$name,$type,$size){ 66 $pdo = $this->dbConnect(); 67 for ($i=0; $i<count($name); $i++) { 68 $inImg = $pdo->prepare("INSERT INTO shohindetails(shohin_id,shohindetail_id,shohin_img,image_name,image_type,image_size,created_at) VALUES(?,?,?,?,?,?,now())"); 69 $inImg ->bindValue(1,$id,PDO::PARAM_INT); 70 $inImg ->bindValue(2,$i,PDO::PARAM_INT); 71 $inImg ->bindValue(3,file_get_contents($content[$i]),PDO::PARAM_STR); 72 $inImg ->bindValue(4,$name[$i],PDO::PARAM_STR); 73 $inImg ->bindValue(5,$type[$i],PDO::PARAM_STR); 74 $inImg ->bindValue(6,$size[$i],PDO::PARAM_STR); 75 $inImg ->execute(); 76 } 77 } 78 function getShohinImg($id,$detailid){ 79 $pdo = $this->dbConnect(); 80 $sql = 'SELECT * FROM shohindetails WHERE shohin_id = :shohin_id AND shohindetail_id = :shohindetail_id '; 81 $stmt = $pdo->prepare($sql); 82 $stmt->bindValue(':shohin_id', $id, PDO::PARAM_INT); 83 $stmt->bindValue(':shohindetail_id', $detailid, PDO::PARAM_INT); 84 $stmt->execute(); 85 $image = $stmt->fetch(); 86 return $image; 87 } 88 function getShohinImgCount($id){ 89 $pdo = $this->dbConnect(); 90 $getCount = $pdo->prepare("SELECT COUNT(*) FROM shohindetails WHERE shohin_id = ?"); 91 $getCount ->bindValue(1,$id,PDO::PARAM_INT); 92 $getCount ->execute(); 93 $data = $getCount->fetchAll(); 94 return count($data); 95 96 } 97?>

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

7p0e2r1u

2022/11/14 01:26

dbのテーブル載せ忘れていたので追記します。 CREATE TABLE shohins( shohin_id BIGINT(10) NOT NULL AUTO_INCREMENT, shohin_ISBN BIGINT(13), shohin_bookcode BIGINT(13), shohin_mei VARCHAR(200) NOT NULL, shohin_bunrui VARCHAR(200) NOT NULL, hanbai_bi DATE NOT NULL, shohin_kakaku INT NOT NULL, shohin_writer VARCHAR(200), shohin_conpany VARCHAR(200), PRIMARY KEY(shohin_id) ); CREATE TABLE shohindetails( shohin_id BIGINT NOT NULL, shohindetail_id BIGINT NOT NULL, shohin_img MEDIUMBLOB, image_name VARCHAR(256), image_type VARCHAR(64), image_size INT, created_at DATETIME, KEY(shohindetail_id), PRIMARY KEY(shohin_id,shohindetail_id), FOREIGN KEY(shohin_id) REFERENCES shohins(shohin_id) );

回答1

1

ベストアンサー

HTML内にインラインで画像を埋め込みたいならbase64処理などが必要です。

PHP

1<img src="data:images/png;base64,<?=base64_encode($image['shohin_img'])?>">

投稿2022/11/14 02:13

yambejp

総合スコア108937

退会済みユーザー👍を押しています

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.12%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

phpMyAdmin

phpMyAdminはオープンソースで、PHPで書かれたウェブベースのMySQL管理ツールのことです。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。