🐈

【音楽ファイル一覧表示機能】nuxtでlaravelのstorageにある画像を取得

2021/07/19に公開

Laravel

Nuxt

tech

状況

<div class="content" v-for="(item, index) in items" :key="index">
{{item.cover_image}}
</div>

これだとパスは取得できる

<img :src="'/storage/app/' +'item.cover_image'">
<img :src="'/storage/app/public/test1画像.png'" alt="">
<img :src="'item.cover_image'">

画像が取得できない（色々なやり方を試す）

consoleを見ると、以下エラー

http://localhost:4000/storage/app/public/test1%E7%94%BB%E5%83%8F.png 404 (Not Found)

http://localhost:4000？？
http://localhost:8000ではないのか
http://localhost:8000にしたい

そもそもimageタグとは

<img src=”URL”>のURL部分に画像の出処を指定することでその画像が表示される

https://axios.nuxtjs.org/options/

https://base64.work/so/vue.js/804635

<img :src="`${$axios.defaults.baseURL}storage/test3画像.png`" width="280px">

解決

Laravel側でpublicを削除し、public配下ディレクトリ/ファイル名でDBに保存し、nuxt側でデータ一覧表示完了

laravel

        $file_name = $request->file('music_file')->getClientOriginalName();
        $include_public = Storage::putFileAs('public/mp3files', $request->file('music_file'), $file_name);
        $music_file->music_file = str_replace('public/', '', $include_public);

nuxt

      <div class="content" v-for="(item, index) in items" :key="index" @click="setMusicFileData">
        <div>
            <img :src="`${$axios.defaults.baseURL}storage/${item.cover_image}`" class="cover-image">
            <h3>{{ item.title }}</h3>
            <audio controls>
              <source :src="`${$axios.defaults.baseURL}storage/${item.music_file}`" type="audio/mp3">
            </audio>
        </div>
      </div>

参考

状況

そもそもimageタグとは

解決

Discussion