javascript - 在这种情况下不能使用 v-img 吗?
问题描述
我将此代码复制/粘贴到我的 Nuxt.js 应用程序中,我在其中使用 Vuetify 到一个组件文件中,其中只有<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"
height="125px"
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 错误:客户端渲染的虚拟 DOM 树与服务器渲染的不匹配,但我已经知道是哪个组件导致了问题。
这在 Chrome 和 Firefox 中都会发生
解决方案
用 no-ssr 包裹 v-img。这样就可以了。
<no-ssr>
<v-img
src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"
height="125px"
contain
></v-img>
</no-ssr>
推荐阅读
- python - 如何从 pandas.to_latex 的输出中删除多余的反斜杠?
- go - 调用接受“chan interface{}”的函数
- git - 监控 Git 远程负载
- java - Spring Boot / Swing 独立应用程序上 AspectJ 方面的自动装配服务 null
- javascript - 我将一个网站部署到 heroku 并更改了我的一些 app.js 文件。为什么我的模板不能在本地服务器上访问了?
- css - 为什么某些网页在移动设备上显示在平板电脑视图中?
- ios - 键入 ListView 的 TextField 元素时,iOS 上的键盘自动隐藏
- javascript - 没有 Node.JS 的 Google Firebase 实时同步?
- python - Flask 服务器事件在开发中工作但不在生产中
- abap - 创建采购申请后触发 IDoc 或 Web 服务