タイトルだとわかりづらくて恐縮です。
apiにリクエストして返ってきた結果data
をv-forディレクティブ内で繰り返し処理を行っています。
そのなかでdownload_each()
というメソッドを呼び出しております。
このメソッドは引数のファイル名から画像のパスが返り値となって返ってきます。(firebase storageから画像をパスをreadしており、ファイル名は自作のapiからimage_nameというkeyで返ってきています)
その返り値をsrcに反映させ画像を表示したいのですが、うまくやり方が分からないです。
以下がソースコードです。
<v-card class="mx-auto" max-width="344" :key="user" v-for="user in this.data"> <v-img v-on="download_each(user.image_name)" :src="//ここにimageのパスを入れたい"></v-img> <v-card-title>{{user.nickname}}</v-card-title> </v-card> <script> import axios from 'axios'; import { download } from '../src/plugins/storage.js' export default { name: "top", data: function() { return{ data: null, uploadImageUrl: "", } }, mounted: async function(){ await axios .get('http://localhost:3000/') .then((response) => { this.data = response.data; }) .catch(error => { alert(error); }) }, methods: async function download_each(file_name){ let image = await download(file_name); } } </script>
特に分からないことが繰り返し処理の中で
methods: async function download_each(file_name){ await download(file_name); }
こう呼んだメソッドの返り値を
<v-img v-on="download_each(user.image_name)" :src="//ここにimageのパスを入れたい"></v-img>
このsrc内にどの様に持たせればいいかということです。
先んじて(v-forで展開する前)複数画像のフルパスを全て撮ってきて、配列(data)に付け加えた後、
datawおv-forで展開するということも考えたのですがもう少し簡単なやり方がないかと思い、質問しました。
ご回答いただけると幸いです。
ループを用いない、通常での画像パスの呼び方はわかっていますか?
あなたの回答
tips
プレビュー