【Vue x Firestore】各ユーザーのアイコンを画面に表示させたいです。

Question

#各ユーザーのアイコンを画面に表示させたいです。

投稿一覧にて投稿したユーザーのアイコンを各投稿に表示させたい（現在はただ画像を埋めているだけです・・）です。

各ユーザーの画像情報はFirestoreに保存しております。

現状コードとしては以下のようにしておりますが、ログイン中ユーザーのみの画像表示方法はわかるのですが
各投稿したユーザーのアイコンをそれぞれ取得して表示させるやり方が分からず困っております。。

分かる方いらっしゃいましたらお力添えを頂きたいです。

宜しくお願い致します。

<template>
  <div class="card">
    <div class="face face1 flex">
      <div class="content">
        <img
          class="profile-icon"
          width="50"
          height="50"
          src="userDatas.uploadedImage == '' ? preview : userDatas.uploadedImage.fileUrl"
        />
        <h3>{{ list.title }}</h3>
        {{ list.id }}
      </div>
    </div>
    <div class="face face2 flex">
      <div class="content flex">
        <button class="hide-btn" @click="deletePost()">×</button>
        <p>{{ list.description }}</p>
        <router-link :to="`/chat/${list.id}`" class="join-btn flex"
          >ルームへ参加</router-link
        >
        <!-- to="`chat/${list.id}`"でchat/(取得したid)でページ遷移する。 -->
        <!-- ${ ~ }で囲ってあげないと文字列のままになってしまうので注意。 -->
        <!-- 「list.id」propsで親コンポーネントから取得したidを取得。-->
        <img
          src="../assets/ブックマーク.jpg"
          alt="ブックマーク"
          class="bookmark-icon"
          @click="savePost"
        />
        <p class="post-time">{{ list.time.toDate().toLocaleString() }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      userid: "",
      userDatas:[]
      preview: require("../assets/デフォルトの画像.jpg"),
    };
  },
  created() {
    firebase
      .firestore()
      .collection("users")
      .doc(id)
      .get()
     .then((snapshot) => {
          this.userDatas.push(snapshot.data());
        });
      });
  },
};
</script>

#追記1

掲載しているFirestore内容のように.uploadedImage.fileUrlにURLを保存しているので
HTML内は:src="userDatas.uploadedImage.fileUrl"という風な記載になるのでしょうか。。

 <img class="profile-icon" width="50" height="50" :src="userDatas.uploadedImage.fileUrl" />

また、data内は以下のように記載しておりますが、写真のようなエラーが出てしまします。。

export default {
  data() {
    return {
      userDatas: [],
      userDatas.uploadedImage.fileUrl(src) {
        if (src != "") {
          return require(`@/assets/img/${src}`);
        }
      },
    };

メソッドで定義するとのことですが、取得する際にメソッドで取得したことがなく記載方法がわからずで、
下記のようにしたのですが、こちらもまたエラーが出てしまいました。。

初学者なものでわからないことばかりで大変申し訳ございません。。

#追記2

解決に至らず行き詰ってしまった為、以下サイトにも掲載させて頂いております。

【Vue x Firestore】各ユーザーのアイコンを画面に表示させたいです。

Answer 1

以下コードでuidとidが一致したものを一つuserData（配列）に保存して表示させるやり方で実装できました。

        <img
          class="profile-icon"
          width="50"
          height="50"
          :src="
            returnUserData() ? returnUserData().uploadedImage.fileUrl : preview
          "
        />

created() {
    firebase
      .firestore()
      .collection("users")
      .get()
      .then((snapshot) => {
        snapshot.forEach((doc) => {
          this.userDatas.push(JSON.parse(JSON.stringify(doc.data())));
        });
      });
  },
  
  methods: {
    returnUserData() {
      const userData = this.userDatas.find(
        (tmpUserData) => this.list.uid === tmpUserData.uid
      );
      return userData;
    },

Answer 2

画像はキャッシュを持ってしまうので、メソッドで取得します。
あとはv-bind:srcディレクティブで紐付けます

<template>
    <img :src="imagePath(任意の画像パス)" >
</template>

//画像を読み込む

data(){
 //変数定義
},
methods:{
   imagePath(src){
	if(src != ''){
		return require(`@/assets/img/${src}`)
	}
   }
}

Comments

[TMTN]

ご回答ありがとうございます。
追記１に追加させて頂きましたが、画像を扱って各ユーザーの画像を表示することをしたことなく
わからないことばかりで大変もうしわけございません。。
ご教示いただけると助かります・・・

[FKM]

data部分はあくまで変数の入れ物なので、そこにメソッドを書いたらだめです。imagePathは画像呼び出し用に作った個人定義のメソッドで、それを呼び出すために:src つまりはv-bind:srcとsrcプロパティを紐付け（こうすれば、自動で呼び出してくれたはず）します。

[TMTN]

そういうことなのですね。。メソッド位置承知致しました。。
imagePathというのはfirestoreの中の画像データを設定する訳でなく、別の値でしょうか。。？
firestoreの画像データを全て取得して反映させると考えていたのですがそうではないのですね。。

[TMTN]

FKM様
大変恐縮なのですが、ご回答受領後自身でも試してみたのですが、分からず行き詰ってしまってます・・
firestoreの画像データを全て取得して、投稿のもつuid情報と、ユーザーのuidが一致したらユーザーの設定されているアイコンを表示させるというような認識をしていたのですが、どのように記述したら実装できるか自身では解決に至らなかったです・・お手数でなければご教示頂きたいです。
宜しくお願い致します。。

[FKM]

vueは特定の場所からでしか画像を参照できない（assetsフォルダなど）ので、まずはfirestoreの画像に対し、Railsかなにかで移動させる必要がありますよ。

[TMTN]

preview: require("../assets/$ ~ $")のような記述方法では参照できないのでしょうか？Railsを学んだことがなくて・・

[FKM]

だったらまずはvueで画像を表示させる方法から攻略して潰していきましょう。

[TMTN]

画像は表示させる方法わかりますが、firestoreからそれぞれのユーザーを取得して、投稿のidとユーザーidが合致したら表示させる方法がわからなくて困っておりまして。。