在这种情况下不能使用 v-img 吗？

Posted 2023-02-22

【中文标题】在这种情况下不能使用 v-img 吗？

【英文标题】：Can not use v-img in this case?

【发布时间】：2019-03-24 09:42:29

【问题描述】：

我将this code 复制/粘贴到我使用Vuetify 的Nuxt.js 应用程序中，其中只有<template> 标记包装它：

<v-card>
    <v-container
      fluid
      grid-list-lg
    >
      <v-layout row wrap> 

        <v-flex xs12>
          <v-card color="purple" class="white--text">
            <v-layout row>
              <v-flex xs7>
                <v-card-title primary-title>
                  <div>
                    <div class="headline">Halycon Days</div>
                    <div>Ellie Goulding</div>
                    <div>(2013)</div>
                  </div>
                </v-card-title>
              </v-flex>
              <v-flex xs5>
                <v-img
                  src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
                  
                  contain
                ></v-img>
              </v-flex>
            </v-layout>
            <v-divider light></v-divider>
            <v-card-actions class="pa-3">
              Rate this album
              <v-spacer></v-spacer>
              <v-icon>star_border</v-icon>
              <v-icon>star_border</v-icon>
              <v-icon>star_border</v-icon>
              <v-icon>star_border</v-icon>
              <v-icon>star_border</v-icon>
            </v-card-actions>
          </v-card>
        </v-flex>
      </v-layout>
    </v-container>
  </v-card>

但我在 Google Chrome 开发工具中收到此错误消息：

这可能是由不正确的 html 引起的 标记，例如在

中嵌套块级元素

，或 失踪 。 Bailing 水合作用并执行完整的客户端 渲染。

我注意到，当我删除组件时，此错误消息消失了。如何解决这个问题？

我看到了类似标题的问题，例如：Vuejs Error: The client-side rendered virtual DOM tree is not matching server-rendered，但我已经知道是哪个组件导致了问题。

Chrome 和 Firefox 都会出现这种情况

【参考方案1】：

用 no-s-s-r 包裹 v-img。这样就可以了。

<no-s-s-r>
  <v-img
    src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
     
      contain
  ></v-img>
</no-s-s-r>

【讨论】：

整个应用程序都包裹在<v-app>中，抱歉我没有提到

用 包装

我之前尝试过<no-s-s-r />，但我想我误用了它。您的代码可以正常工作，非常感谢您