質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

解決済

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

goroentsumugu
goroentsumugu

総合スコア2

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

1回答

0リアクション

0クリップ

141閲覧

投稿2022/08/14 22:04

編集2022/08/15 10:54

前提

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

実現したいこと

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

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

リンク先がない

Vuejs

<v-row class="pt-4" > <v-col class="pa-1" v-for="recipe in recipes.value" :key="recipe.recipehistory_id" cols="6" xs="4" sm="4" md="3" > <v-card class="mx-auto" > <v-img class="white--text align-end" height="200px" src="{{ recipe.recipe.img_url }}" > <v-card-title> {{ recipe.recipe.name }} </v-card-title> <v-card-subtitle> 種別: {{ recipe.recipe.kinds_display }} </v-card-subtitle> <v-card-subtitle> 色:{{ recipe.recipe.color_display }} </v-card-subtitle> </v-img> <v-card-subtitle> 売上: <v-text-field single-line > {{ recipe.sold }} </v-text-field> </v-card-subtitle> </v-card> </v-col> </v-row>

画像が表示されない

イメージ説明

試したこと

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

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

イメージ説明

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

Vuejs3 Vuetify3

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

shiketa

2022/08/15 01:26 編集

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

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。