Cloudinary Nuxt 模块：未知元素 cld-image

Posted 2023-03-25

【中文标题】Cloudinary Nuxt 模块：未知元素 cld-image

【英文标题】：Cloudinary Nuxt Module: Unknown element cld-image

【发布时间】：2021-12-02 05:39:40

【问题描述】：

我正在使用@NuxtJS/Cloudinary 模块，如下所示：

              <cld-image
                :public-id="post.photoURL"
                class="rounded-circle me-1"
                type="fetch"
                
                
                crop="fill"
                gravity="auto"
                fetch-format="auto"
                quality="auto"
                :
              />

它在我的应用程序中运行良好。但是，在浏览器控制台中，我收到以下 Vue Hydration 警告：

vue.runtime.esm.js?2b0e:619 
        
       [Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect html markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

我确实在我的 nuxt.config.js 文件中添加了模块，如下所示：

modules: ['@nuxtjs/cloudinary'],

并且，当我运行 HTML 验证时，我的文本编辑器中显示以下 HTML 验证错误，如下所示：

error Unknown element <cld-image>

好的，那我需要在本地手动导入cld-image 组件吗？如果是这样，在 nuxt.config.js 中有 cloudinary 模块的目的是什么？

【问题讨论】：

错误来自<cld-image>标签吗？如果你用第二个标签关闭它怎么办？您是否对模块进行了任何其他配置？

这里的问题与您的错误有关吗？ github.com/nuxt-community/cloudinary-module/issues/…我知道我遇到过一次，但仍然没有解决。否则，您当然也可以将其包装成client-only。

我试图用第二个标签关闭它——同样的问题。是的，我是在 github 上发布该问题的人。将它包装在仅客户端修复它，我对此很满意——s-s-r 不需要它，因为它是一个头像图像。谢谢！

【参考方案1】：

您可以使用client-only 标签来解决这个问题。

否则，不妨试试 Nuxt 图像模块的云端集成：https://image.nuxtjs.org/providers/cloudinary/