vuetify：不显示 v-img 中的标签

Posted 2023-02-22

【中文标题】vuetify：不显示 v-img 中的标签

【英文标题】：vuetify: label inside v-img isn't shown

【发布时间】：2020-07-31 05:49:33

【问题描述】：

在 v-dialog 中，我使用了一个带有标签的 v-img 元素，并且该标签未显示。我在this Codepen 中重现了这个问题。当您打开对话框时，图像顶部应该有一个标有“山脉”的标签。实际问题是 Vuetify 自动添加的这种样式：

.v-application--is-ltr .v-responsive__sizer~.v-responsive__content 
    margin-left: -100%;

我试图覆盖样式，但它不起作用，因为样式和响应元素可能是在 CSS 编译后动态呈现的。

当图像不在 v-dialog 中时也会出现此问题。

在this example from the Vuetify docs 中它可以工作，我宁愿不使用大量 CSS 来破解它。

有人可以帮忙吗？

【问题讨论】：

在v-img之外不能取包含标签的v-row？

这不起作用，而且在这个 vuetify 示例中，它是用 v-img 中的一行实现的，所以它必须以某种方式工作 vuetifyjs.com/en/components/images/#fixed-ratio

【参考方案1】：

解决方案是我删除了我的图像样式上的一个过时的display: block;，这破坏了它。