【Laravel】画像を複数枚アップロードし、表示させたい

Question

Laravelで、画像の投稿機能を備えたサービスを開発中です。
画像を1枚だけの送信であれば、その1枚はビュー側で正常に表示されるんですが、画像を複数枚（上限10枚）送信したとき、ビュー側での表示のさせ方（書き方）がわかりません。
リクエストの中には複数枚入っているんですが、どのようにしたら複数枚表示されるようになりますか？

エラーがこのように出ています。
「Cannot use [] for reading」

---

show.blade.php（フォームで入力した情報が表示されるページ

 @if ($lecture->image)
 <figure class="show_post_thumbnail"><div class="new_area-img text-center"><img class="show_image" src="{{ asset('storage/'.$lecture->image) }}"></div></figure>
 @elseif ($lecture->image >= count(2) && $lecture->image < count(11))
 <figure class="show_post_thumbnail"><div class="new_area-img text-center"><img class="show_image" src="{{ asset('storage/'.$lecture->image[]) }}"></div></figure>
 @else
 <figure class="show_post_thumbnail"><div class="new_area-img text-center"><img src="../img/noimage.gif"></div></figure>
 @endif

---

ちなみに、コントローラーで、
受け取った image を $files として代入し、それの一つ一つにパスを割り当てた後にセーブしているので、画像を複数枚送信したとしても、最終的には1つしか画像が残らないというような記述になっているのかもしれないのですが、やはり書き方がおかしいでしょうか？

LecturesController

public function store(Request $request) {

        $this->validate($request, [
            'category_name' => 'required',
            'title' => 'required|max:100',
            'content' => 'required',
        ]);

        if ($request->hasFile('image') ) {
            $lecture = new Lecture;

            $lecture->user_id = \Auth::id();
            $lecture->category_name = $request->category_name;
            $lecture->title  = $request->title;
            $lecture->content = $request->content;

            $files = $request->file('image');
            
            // foreach で $files に入った画像を $file として別個に取り出す
            foreach ($files as $file) {

                // UNIXタイムスタンプを取得したものと、ユーザーID、オリジナルの拡張子を取得したものとを繋ぎ、ファイル名として $filename に代入
                $filename = time() . '_' . $lecture->user_id . '.' . $file->getClientOriginalExtension();
            
                // storeAs の第1引数は storage からのパス、第2引数はファイル名、第3引数は利用するストレージ(local、public…など）
                $path = $file->storeAs('', $filename, ['disk' => 'public']);

                // パスを image カラムに代入
                $lecture->image = $path;

                // 最終的な状態を保存
                $lecture->save();
            }
        } 
        else {
            $request->user()->lectures()->create([
                'category_name' => $request->category_name,
                'title' => $request->title,
                'content' => $request->content,
            ]);
        }
        
        return redirect('/');
    }

---

create.blade.php（フォーム）

<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>
<div class="form-group">
 <label class="font-weight-bold">画像</label>
 <input type="file" name="image[]" class="form-control-file" multiple="multiple">
</div>

---

以上、詳しい方よろしくお願いいたしますm(_ _)m

Answer 1

foreachで必要なだけimgタグを生成してください

Comments

[Keight]

それはどこに記述すればいいでしょうか？
show.blade.phpで、このようにしてみましたが、「Undefined variable: files」と出ました????

@if ($lecture->image)
　@foreach ($files as $file)
　<figure class="show_post_thumbnail"><div class="new_area-img text-center"><img class="show_image" src="{{ asset('storage/'.$lecture->image) }}"></div></figure>
　@endforeach
　@else
　<figure class="show_post_thumbnail"><div class="new_area-img text-center"><img src="../img/noimage.gif"></div></figure>
@endif

[mikkame]

filesという変数が存在しません。
という意味です。$filesっていきなりでてきていますがどこからでてきましたか？

[Keight]

LecturesControllerのほうで書いているのですが、それをビュー側で使うには何かやり方があるのでしょうか？

public function store(Request $request) {

$this->validate($request, [
'category_name' => 'required',
'title' => 'required|max:100',
'content' => 'required',
]);

if ($request->hasFile('image') ) {
$lecture = new Lecture;

$lecture->user_id = \Auth::id();
$lecture->category_name = $request->category_name;
$lecture->title = $request->title;
$lecture->content = $request->content;

$files = $request->file('image');

// foreach で $files に入った画像を $file として別個に取り出す
foreach ($files as $file) {

// UNIXタイムスタンプを取得したものと、ユーザーID、オリジナルの拡張子を取得したものとを繋ぎ、ファイル名として $filename に代入
$filename = time() . '_' . $lecture->user_id . '.' . $file->getClientOriginalExtension();

// storeAs の第1引数は storage からのパス、第2引数はファイル名、第3引数は利用するストレージ(local、public…など）
$path = $file->storeAs('', $filename, ['disk' => 'public']);

// パスを image カラムに代入
$lecture->image = $path;

// 最終的な状態を保存
$lecture->save();
}
}
else {
$request->user()->lectures()->create([
'category_name' => $request->category_name,
'title' => $request->title,
'content' => $request->content,
]);
}

return redirect('/');
}

[mikkame]

redirectと書いてありますね。この時点で別のHTTPリクエストになるので変数の持ち越しはできません。
View云々、画像云々ではありません。
画像は関係ないので、文字列であればビューに渡す事ができるかどうか周りから考えてみてはどうでしょうか

[Keight]

そうなんですね、勉強になりますm(_ _)m

「文字列であればビューに渡す事ができるかどうか」ということについて、恥ずかしながら、どういうことなのかが理解できるレベルではなく、手詰まりを感じています。

コントローラーでの複数画像の取り扱い（書き方）に問題は見られませんでしょうか？
また、画像が複数送信された際に、ビューに表示させる場合は、ビュー側でどのように書くとよいでしょうか？
すみません、解から検証してできたらと考えております。
いろいろと調べてみたのですが、ちょっともう八方塞がりな状態で????