はじめに
前回Laravelで画像のパスをDBに保存する方法をご紹介したので、今回は画像を表示する方法関してご紹介していきたいと思います。
保存する方法に関しては以下の記事をご参考ください。
Laravelで画像をアップロードし、パスをDBに保存する方法
こちらでは、画像のパスがすでにDBに保存されている前提で進めており、ファイル名等は全て前回作成したものを利用していきます。
-各バージョン
-laravel 6.x
-PHP 7.4.9
-mySQL 5.7.30
コントローラーを記述する
今回はindexアクションを使っていきたいと思います。
DBファザード使用するため、useで宣言し、そのあとに書いていきます。
use Illuminate\Support\Facades\DB;
public function index()
{
$books = DB::table('books')->orderBy('created_at', 'desc')->get();
return view('index', compact('books'));
}
まず、前回作成したbooksテーブルのデータを取得し、orderBy()でcreated_at、つまり作成した日時をdesc順に並べるように指定しています。descとはdescendの略で、下に降りるという意味になるので、指定することによって作成した日時が新しいものが先頭に来るようになります。
そして取得したものを$booksという変数に格納しています。
続いて格納したものをreturnでビューに渡すようにします。
index.blade.phpというビューをこのあと作成するので、indexを指定し、compact()メソッドで変数をビューに渡すことができるようになっています。compact()を使用するときは$マークはつけずに記述して問題ありません。
また、今回はデータが少ないため全てのデータを取得していますが、もしデータが多く一覧画面では一部のデータのみ表示させたい場合は、以下のように書くこともできます。
use Illuminate\Support\Facades\DB;
public function index()
{
$books = DB::table('books')
->select('id','title', 'author', 'created_at') //ここを追加
->orderBy('created_at', 'desc')
->get();
return view('index', compact('books'));
}
select()でデータを選択することができるので、表示したいカラム名を指定することができます。
この場合は別途、全てのデータを表示する画面を作成するといいでしょう。
ビューを作成する
新しくデータを表示するindex.blade.phpを作成し、一覧を表示させるコードを書いていきます。
なお、今回はデータが少ないので全てのデータが表示されるようにしていきます。
@foreach('books' as 'book')
<table>
<tr>
<th>タイトル</th><td>{{ $book->title }}</td>
</tr>
<tr>
<th>作者</th><td>{{ $book->author }}</td>
</tr>
<tr>
<th>投稿日</th><td>{{ $book->created_at }}</td>
</tr>
<tr>
<th>画像</th><td><img src="{{ asset('uploads/books/' . $book->image) }}" alt="book-image"></td>
</tr>
</table>
＠endforeach
BookControllerでbooksテーブルのデータを$booksに格納しているので、データをforeachで回して表示するようにしています。
画像に関しては、DBには画像のパスしか保存されていないため、画像の保存先を指定する必要があります。画像は前回Publicフォルダ内のuploads/booksに保存したので、今回はそのように指定しています。
また、見えやすくするようにtableを使用しましたが、便宜に合わせてulやpタグで表示することも可能です。
ルーティングを指定する
index.blade.phpに接続したら、BookController内のindexアクションが起動するようにします。
Route::get('index', 'BookController@index')->name('index');
以上で完成です！
さいごに
今回はDBに保存している画像のパスを表示させる方法に関して解説しました。
もっとこういうやり方あるよーという場合は、やさしくコメントで教えていただけるとありがたいです！
ここまで読んでくださりありがとうございました！