この記事の目的

ずっとNuxt.jsを利用していたので、Vue.js復習として。
環境変数を利用してのimg表示に手こずったので備忘録として記述します。

環境

Vue.js　3.3.4
Laravel 10

前提

vue.js,Laravelのプロジェクト作成ができていること。

手順

・Laravel側の設定
"storage/app/public"にある画像をVue.js表示するためにはシンボリックリンクを貼る必要があります。この辺りは検索するとたくさん出てくるので割愛します。

php artisan storage:link

これだけは忘れずに・・・！

・Vue.js側の設定今回こっちが本題でした。Vue.jsプロジェクト直下に.envファイルを作成します。Vue.jsではVUE_APPを頭につける必要があるそうです。axiosを利用しているので同じbaseURLを利用しました。

// .env

VUE_APP_BASE_URL="http://127.0.0.1:8000/"

開発環境localであれば上記の通りです。

<template>
  <div>
     <img :src="imgPath" alt="画像説明" />
  </div>
</template>

<script>
export default {
  name: "HomeView",
  data() {
    return {
     img: 'img.png',
  },
  computed: {
    imgPath() {
      return       
   `${process.env.VUE_APP_BASE_URL}storage/${this.img}`;
  },
  }

あとはこれだけ！
src=""　でなく　:src=""　なので注意！
実際はストレージを借りたりすると思うので、baseURLでなく、例えば、

// .env

VUE_APP_STORAGE_URL="ストレージサービスのURL"

などにして置き換えたらいいかと思います。
良い復習になりました。