Zenn
🙈

シンボリックリンクをしたけど、画像が表示されなくて詰まったところ

に公開
tech
したいこと
  • 画像ファイルをアップロードして、画像を表示させること

シンボリックリンクが必要な理由

  • 画像ファイルは、/storage/app/public/images以下に保存される
  • 外部(web)からファイルを呼び出す時は、/publicディレクトリ以外アクセスできない。

そのため、シンボリックリンクで/storage/app/public/imagesに保存されたファイルを、public以下にも保存されるようにリンクさせる（ショートカットを作るみたいな）

シンボリックリンク作成コマンド
./vendor/bin/sail artisan storage:link'

すると、/storage/app/public/images と /public/storage/imagesに同じ画像が保存される。

画像が表示されない

原因１: viewの書き方

保存ボタンを押してもformから画像が保存されていなかった。

index.blade.php
    <form action="{{ route('account.icon') }}" method="post" enctype="multipart/form-data">
      <div class="position-relative">

      @csrf
    <label for="formFile" class="form-label col-sm-2 "></label>
      <div class="position-absolute top-100 start-50 translate-middle col-sm-5">
        <input class="form-control" type="file" id="formFile">
        <button type="submit" class="btn btn-primary col-sm-12">Upload</button>
      </div>
      </div>
    </form>

してなかったことは、

①　フォームタグに、enctype="multipart/form-dataを記述すること

データが複合データ型で、１回のHTTP通信で複数の種類のデータ形式を扱うことができることを指す。

②name属性の設定

コントローラー側では、formのinputタグにつけたname属性の値でファイルを取得するので、これもないと画像を受け取ってくれない。
こんな風にデータを渡していくことができる。

UpdatenRequest.php
    public function filename() {
        return $this->file('file');
    }

原因2: サーバーのパス

画像保存ボタンを押して、public以下にも画像が保存されていて、
画像ファイルのパスはあってるはずなのに、画像が表示されなかった。

http://localhost/storage/images/hO0VPmmMcSeMyU8QEUCrhiXqAmDpoQmB8XHhQbgu.jpg

シンボリックリンクのパスが違っていた

ターミナルで、public/strageのパスを確認する
ls（リスト）のla(l:詳細を、a:全て表示)

user@mac-Air sample-app % cd public
user@mac-Air public % ls -la
total 24
drwxr-xr-x   8   staff   256  7 25 16:26 .
drwxr-xr-x  29  staff   928  7 24 12:19 ..
-rw-r--r--   1   staff   603  6  7 22:20 .htaccess
drwxr-xr-x   4  staff   128  7 20 17:35 build
-rw-r--r--   1  staff     0  6  7 22:20 favicon.ico
-rw-r--r--   1   staff  1710  6  7 22:20 index.php
-rw-r--r--   1   staff    24  6  7 22:20 robots.txt
lrwxr-xr-x   1   staff    66  7 25 16:26 storage -> /Users/username/file_name/sample-app/storage/app/public

/Users/username~~~となっているのが❌
Dockerコンテナを使っているときは、/var/www/htmlがルートディレクトリになるので、設定し直す。
↓ リンクを切って、

user@mac-Air public % unlink storage

↓ 設定し直す

user@mac-Air public % ln -nfs /var/www/html/storage/app/public storage

↓ 確認

user@mac-Air public % ls -la                                     
total 24
-rw-r--r--   1 madokatakanami  staff    24  6  7 22:20 robots.txt
lrwxr-xr-x   1 madokatakanami  staff    27  7 26 12:19  storage -> /var/www/html/storage/app/public

画像が表示される！

Discussion