Nuxt.jsにて、Firebase Cloud Storageから取得した画像を表示できない。

はじめに

質問をご覧いただき、ありがとうございます。

普段、モバイルエンジニアをしている、Web開発の初学者です。

Nuxt.jsについて質問させて下さい。

実現したいこと

Firebase Cloud Storageに保存した画像を表示したい

解決したい内容

Firebase Cloud Storageの画像のURLをFirestoreに保存しています
Nuxt.jsのscriptタグの中でFirestoreの画像URLが格納されているドキュメントを取得しています
ドキュメントから取得した画像URLをthis.imageUrlに代入します
<img :src="this.imageUrl">でimgタグとデータをバインディングして表示しようとしています

上記の手順で画像を表示できるものと思っていたのですが、実際には、以下のような表示になってしまい、
正常に画像が表示されません。
(画像のURLを固定で指定すると正常に表示されるので、画像のURLは正しくDLできております！)

ネットの記事を色々と漁ってはみたのですが、
画像ファイルのアップロードについての情報は色々と見つかるのですが、
画像ファイルのダウンロードについてまとめてある情報を見つけることができず、
原因がわからず困っております。

ソースコード

【index.vue】
<template>
 <div class="page">
   <h1>Data from Firebase!</h1>
   <table class="Table">
      <thead>
        <tr>
          <th>ID</th>
          <th>画像のURL</th>
          <th>アップロード日時</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in dbData" :key="index">
          <td>{{ item.id }}</td>
          <td>{{ item.imagePath }}</td>
          <td>{{ item.uploadDate }}</td>
          <td><a v-bind:href="item.sampleUrl">to sample</a></td>
        </tr>
      </tbody>
    </table>
 </div>
</template>
<script>
import firebase from '@/plugins/firebase'

export default {
 data() {
   return {
     dbData: [],
   }
 },
 created() {
  console.log("index - created called!")
  let dbData = []
  this.dbData = dbData
  firebase.firestore().collection('Unchecked').get().then(snapshot => {
    //...（略）...ここで Firestore から取得したデータをdbDataに格納してます！
    // sampleUrlはid, imagePath, uploadDateをqueryとして、detail.vueに遷移するためのhrefのURLです
    this.dbData.push({id: gotdata.id, imagePath: gotdata.imagePath, uploadDate: gotdata.uploadDate, sampleUrl: sampleUrl}); 
  });
 },
}
</script>

【detail.vue】
<template>
    <section class="container">
        <h1>Here is Detail page</h1>
        <h3>ID: {{ id }}</h3>
        <h3>User ID: {{ userId }}</h3>
        <h3>Image: {{ imagePath }}</h3>
        <h3>Point: {{ point }}</h3>
        <h3>Upload Date: {{ uploadDate }}</h3>
        <div>
            <nuxt-link to="/">Back to TopPage!</nuxt-link>
        </div>
        <div>
            <button 
            type="button"
            @click="hoge">
                getData
            </button>
        </div>
        <div>
            <img v-bind:src="imagePath">
        </div>
    </section>
</template>

<script>
export default {
  data() {
    console.log("sample - data() called!")
    return {
      id: this.$route.query.id,
      imagePath: this.$route.query.imagePath, // ← ここでqueryパラメータのimagePathを代入
      uploadDate: this.$route.query.uploadDate,
    }
  },
</script>

<style>
img {
  width: 600px;
  height: 600px;
  object-fit: content;
  transform: rotate(-270deg);
}
</style>

解決方法など、ご存知の方いらっしゃいましたら、
ご教示いただけますと幸いです。

何卒、よろしくお願い致します。