00.vue用デザインフレームワークvuetify:06.vuetifyで画像表示のリンクの注意点

差分

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- 00.vue用デザインフレームワークvuetify:06.vuetifyで画像表示のリンクの注意点 [2018/12/27] – 作成 adash333
+++ 00.vue用デザインフレームワークvuetify:06.vuetifyで画像表示のリンクの注意点 [2019/03/08] (現在) – [06.Vuetifyで画像表示のリンクの注意点] adash333
@@ 行 4: / 行 4: @@
 理由は、Vue loaderとVuetifyの相性によるものだそうです。
-<img src="../assets/target.jpg"> => 画像が表示される
+<wrap hi><img src="../assets/target.jpg"></wrap> => 画像が表示される
-<v-img src="../assets/target.jpg"></v-img> => 画像が表示されず、画面全体が真っ白になってしまう
+<wrap hi><v-img src="../assets/target.jpg"></v-img></wrap> => 画像が表示されず、画面全体が真っ白になってしまう
 解決策は、以下のようにするそうです。
 例えば、src/components/Hello.vueにおいて、src/assets/target.jpgを表示するためには、以下のような記載方法となる。
-（Vuetify使用するために、かなり面倒なことになっている。これは、Vuetifyの最大の欠点かもしれない。。。どうりで、Vuetifyの公式サイトでは、いつも、v-img のsrcがhttps:から始まっているわけだ。。。）
+（Vuetifyを使用するために、かなり面倒なことになっています。これは、Vuetifyの最大の欠点かもしれません。。。どうりで、Vuetifyの公式サイトでは、いつも、v-img のsrcがhttps:から始まっているわけなんですね。。。）
 <code>
@@ 行 27: / 行 27: @@
 </code>
-{{:10.vue.jsとfirebaseでランキングつき連打ゲーム:pasted:20181227-223912.png}}
+{{:00.vue用デザインフレームワークvuetify:pasted:20181227-225928.png}}
-参考：https://vuetifyjs.com/ja/getting-started/frequently-asked-questions
+===== ソースコード =====
+https://codesandbox.io/s/kxk6v8mwzv
+===== リンク =====
+https://vuetifyjs.com/ja/getting-started/frequently-asked-questions
 の一番下のFAQ
@@ 行 38: / 行 44: @@
 画像を水平真ん中にするためには、<v-layout justify-center></v-layout>で囲みます。
 https://codepen.io/CasperLai/pen/pwMrMg
+http://salary.katsulabo.com/
+【vue.js】画像ファイルのアドレスの指定方法について【vuetify】
+投稿日：2018年10月13日	更新日：2018年10月23日

00.vue用デザインフレームワークvuetify/06.vuetifyで画像表示のリンクの注意点.1545918999.txt.gz · 最終更新: 2018/12/27 by adash333