Vuetify VuejsでリンクしたGooglePhotoが表示されない

前提

実現したいこと

ここに実現したいことを箇条書きで書いてください。
Vuetify でGoogPhotoに保存している写真を表示したい

発生している問題・エラーメッセージ

リンク先がない

Vuejs
1
2        <v-row
3            class="pt-4"
4        >
5            <v-col
6                class="pa-1"
7                v-for="recipe in recipes.value" :key="recipe.recipehistory_id"
8                cols="6"
9                xs="4"
10                sm="4"
11                md="3"
12            >
13                    <v-card
14                        class="mx-auto"
15                    >
16                        <v-img
17                        class="white--text align-end"
18                        height="200px"
19                        src="{{ recipe.recipe.img_url }}"
20                        >
21                            <v-card-title>
22                                {{ recipe.recipe.name }}
23                            </v-card-title>
24                            <v-card-subtitle>
25                                種別： {{ recipe.recipe.kinds_display }}
26                            </v-card-subtitle>
27                            <v-card-subtitle>
28                                色：{{ recipe.recipe.color_display }}
29    
30                            </v-card-subtitle>
31                        </v-img>
32                        <v-card-subtitle>
33                        売上：    
34                        <v-text-field
35                            single-line
36                        >
37                            {{ recipe.sold }}
38                        </v-text-field>
39
40                        </v-card-subtitle>
41                    </v-card>
42            </v-col>
43        </v-row>

画像が表示されない

試したこと

URLを直接指定すると表示されますが、{src="{{ recipe.recipe.img_url }}"で動的になった場合に、Localの階層を探しているようですが、解決できませんでした。

要素を確認すると、src="{{ recipe.recipe.img_url }} のままで展開されていないようです。

補足情報（FW/ツールのバージョンなど）

Vuejs3 Vuetify3

shiketa

2022/08/15 01:26 編集

> v-for="recipe in recipes.value" 具体的な、`recipes.value`の内容を提示してみてはいかがかと。 \# な～んとなく、`src="{{ recipe.recipe.img_url }}"`ではなく`src="{{ recipe.img_url }}"`なのではないのかしら、とおもってみたり。

行動規範の内容に同意します

回答1件

ベストアンサー

要素を確認すると、src="{{ recipe.recipe.img_url }} のままで展開されていないようです。

こうでは?

diff
1                      <v-img ...
2-                       src="{{ recipe.recipe.img_url }}"
3+                       :src="recipe.recipe.img_url"
4 or
5+                       v-bind:src="recipe.recipe.img_url"
6                        >