結論
以下のとおり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;
となり、画像が表示されない。
力技で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