LoginSignup
0
0

【Vuetify】vueバージョンが3.5.16以上だと、v-imgで指定した画像が表示されない

Posted at

結論

以下のとおりvueのバージョンを固定すれば表示される。

package.json
"vue": "3.4.15"

現象

以下のようにv-imgを指定し、表示を確認する。

sample.vue
<v-img
    :src="card.src"
    class="align-end"
    gradient="to bottom, rgba(0,0,0,.1), rgba(0,0,0,.5)"
    height="200px"
    cover
>
    <v-card-title class="text-white">タイトル</v-card-title>
</v-img>

すると、以下のとおりstyle="display:none;となり、画像が表示されない。

image.png

力技でdisplay: block !important;とCSSを指定しても言うことを聞かない。。。
調べてみると、海外の記事でバージョンが問題となっているところまで辿りつき、解決できました。

Yes it broke anything using v-show with a transition. Stay on 3.4.15 until it's fixed.

和訳:そう、トランジションでv-showを使うものはすべて壊れてしまった。修正されるまで3.4.15を使い続けてください。

この問題はVuejsのバグです。日本語の記事がなかったので投稿してみました。
同じ問題に困っている方の参考になれば幸いです。

参考

https://github.com/vuetifyjs/vuetify/issues/19194
https://github.com/vuetifyjs/vuetify/issues/19191

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0