画像の保存先をpublicからS3に変更すると画像が表示されない

Question

前提・実現したいこと

現在、laravel+dockerで商品を出品できるフリマアプリを制作しているのですが、商品画像の保存先をmysqlからS3に変更すると、画像が表示されなくなってしまいました。

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

エラーメッセージ等はなく、S3には画像が保存されています。

しかし、対象の画像部分では保存した内容が表示されず、以下のように表示されています。

該当のソースコード

<?php

namespace App\Http\Controllers;

use App\Http\Requests\SellRequest;
use App\Models\Item;
use App\Models\ItemCondition;
use App\Models\PrimaryCategory;
use Illuminate\Http\File;
use Illuminate\Http\Request;
use Illuminate\Http\UploadedFile;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Storage;
use Intervention\Image\Facades\Image;

class SellController extends Controller
{
    public function showSellForm()
     {
        $categories = PrimaryCategory::query()
             ->with([
                 'secondaryCategories' => function ($query) {
                     $query->orderBy('sort_no');
                 }
             ])
             ->orderBy('sort_no')
             ->get();

        $conditions = ItemCondition::orderBy('sort_no')->get();
 
        return view('sell')
            ->with('categories', $categories)
            ->with('conditions', $conditions);
     }

     public function sellItem(SellRequest $request)
     {
         $user = Auth::user();

         $imageName = $this->saveImage($request->file('item-image'));
 
         $item                        = new Item();
         $item->image_file_name       = $imageName;
         $item->seller_id             = $user->id;
         $item->name                  = $request->input('name');
         $item->description           = $request->input('description');
         $item->secondary_category_id = $request->input('category');
         $item->item_condition_id     = $request->input('condition');
         $item->price                 = $request->input('price');
         $item->state                 = Item::STATE_SELLING;
         $item->save();
 
         return redirect()->back()
             ->with('status', '商品を出荷しました。');
     }

     /**
      * 商品画像をリサイズして保存します
      *
      * @param UploadedFile $file アップロードされた商品画像
      * @return string ファイル名
      */
      private function saveImage(UploadedFile $file): string
      {
          $tempPath = $this->makeTempPath();
  
          Image::make($file)->fit(300, 300)->save($tempPath);
  
          $filePath = Storage::disk('s3')
              ->putFile('item-images', new File($tempPath));
  
          return basename($filePath);
      }
  
      /**
       * 一時的なファイルを生成してパスを返します。
       *
       * @return string ファイルパス
       */
      private function makeTempPath(): string
      {
          $tmp_fp = tmpfile();
          $meta   = stream_get_meta_data($tmp_fp);
          return $meta["uri"];
      }
}

                       ###省略###

                    {{-- 商品画像 --}}
                    <div>商品画像</div>
                    <span class="item-image-form image-picker">
                        <input type="file" name="item-image" class="d-none" accept="image/png,image/jpeg,image/gif" id="item-image" />
                        <label for="item-image" class="d-inline-block" role="button">
                            <img src="/images/item-image-default.png" style="object-fit: cover; width: 300px; height: 300px;">
                        </label>
                    </span>
                    @error('item-image')
                        <div style="color: #E4342E;" role="alert">
                            <strong>{{ $message }}</strong>
                        </div>
                    @enderror

                      ###省略###

###商品の一覧画面です。ポストした画像を反映させています

@foreach ($items as $item)
        <div class="d-flex mt-5 border position-relative container-mk">
            <div class="position-relative overflow-hidden">
                <img class="img-fluid" style="height: 140px; width: 140px;" src="/storage/item-images/{{$item->image_file_name}}">
                <div class="position-absolute py-2 px-3" style="left: 0; bottom: 20px; color: white; background-color: rgba(0, 0, 0, 0.70)">
                    <i class="fas fa-yen-sign"></i>
                    <span class="ml-1">{{number_format($item->price)}}</span>
                </div>
                <!--商品が購入済みの場合-->
                @if ($item->isStateBought)
                <div class="position-absolute py-1 font-weight-bold d-flex justify-content-center align-items-center" style="left: 0; top: 0; color: white; background-color: rgba(0, 0, 0, 0.70);  width: 140px; height: 140px; font-size: 20px;">
                    <span>完売</span>
                </div>
                @endif
            </div>
            <div class="flex-fill p-3">
                <small class="text-muted">{{$item->secondaryCategory->primaryCategory->name}} / {{$item->secondaryCategory->name}}</small>
                <h5 class="card-title mt-2 font-weight-bold" style="font-size: 20px">{{$item->name}}</h5>
            </div>
            <a href="{{ route('item', [$item->id]) }}" class="stretched-link"></a>
        </div>
        @endforeach

試したこと

S3にて、保存することはできているので、画像の反映部分でもあるitems.blade.phpのimgのsrc属性に問題があると考えています。

類似の質問の以下の記事を参考に画像の呼び出し方を変更したのですが、解決することができませんでした。
参考にした質問（LaravelでS3に保存したが画像が表示されない）

データベースの設定を変更している記事もあったため、どのような手順が適しているのかお伺いしたく投稿させて頂きました。

お忙しい中恐縮ですが、ご教授いただければ幸いです。よろしくお願い致します。

開発環境

Laravel 7.25
PHP 7.3
S3に対して、画像を保存しています

Comments

[hoshi-takanori]

img src にホスト名がないからでは。

[Atsushi_5858]

hoshi-takanoriさん
ご返信いただきありがとうございます。

ホスト名とは、権限を持ったIAMユーザーのことでしょうか？

[hoshi-takanori]

S3 は詳しくありませんが、たぶん保存先は https://s3-ap-northeast-1.amazonaws.com/〜 みたいな URL になると思います。(ホスト名とはこの s3-ap-northeast-1.amazonaws.com とかのことです。) かつ、それはアプリが動いてるホスト (ネットワークに接続されたマシンのこと) とは別だと思いますが、<img src="/storage/〜"> という書き方だと同じホストに存在することになるために表示できないのでしょう。

[Atsushi_5858]

hoshi-takanoriさん
ご返信いただきありがとうございます。
丁寧に説明をして頂き、大変感謝しております。

DBにpathのカラムを作成している記事を拝見したのですが、この場合はDBの編集は不要でしょうか？
現在の商品のデータテーブルは以下の通りです。

<creat_app_tables.php>

Schema::create('items', function (Blueprint $table) {
$table->id();
$table->unsignedBigInteger('seller_id');
$table->unsignedBigInteger('buyer_id')->nullable();
$table->unsignedBigInteger('secondary_category_id');
$table->unsignedBigInteger('item_condition_id');

$table->string('name');
$table->string('image_file_name');
$table->text('description');
$table->unsignedInteger('price');
$table->string('state');
$table->timestamp('bought_at')->nullable();

$table->timestamps();

$table->foreign('seller_id')->references('id')->on('users');
$table->foreign('buyer_id')->references('id')->on('users');
$table->foreign('secondary_category_id')->references('id')->on('secondary_categories');
$table->foreign('item_condition_id')->references('id')->on('item_conditions');
});

[hoshi-takanori]

DB は関係ないと思いますけど…。S3 にアップロードした画像をブラウザで開くことが可能なら、その URL のファイル名の手前までの部分と $item->image_file_name を組み合わせれば良いのでは？ (自分は S3 詳しくないので知りませんが、S3 の URL を取得する正しい方法は別にあるかもしれませんが…。)

[Atsushi_5858]

hoshi-takanoriさん
ご返信いただきありがとうございます。

頂いたアドバイスを参考に早速試してみます。
最後までご回答いただきありがとうございました。

Answer 1

Storage::url() を使うとどうでしょうか。

items.blade.php

<img src="{{ Storage::disk('s3')->url('item-images/' . $item->image_file_name) }}" ... >

参考: ファイルのURL

Comments

[Atsushi_5858]

Lulucomさん
ご返信頂きありがとうございます。

アドバイス頂いたコードを実行してみると、無事、ブラウザ上での画像を確認することができました。誠にありがとうございます。以後、公式ドキュメントの読み込みも意識していきます。

今回もご教授いただき感謝しております。Lulucomさんの回答をもって、今回の質問を解決済みにしたいと思います。