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

Question

我正在这样使用 @NuxtJS/Cloudinary 模块：

              <cld-image
                :public-id="post.photoURL"
                class="rounded-circle me-1"
                type="fetch"
                width="40"
                height="40"
                crop="fill"
                gravity="auto"
                fetch-format="auto"
                quality="auto"
                :alt="`${post.displayName}'s avatar image`"
              />

它在我的应用程序中运行良好。但是，在浏览器控制台中，我收到以下 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>

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

Answer 1

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

否则，也许可以尝试Nuxt图像模块的云集成：https://image.nuxtjs.org/providers/cloudinary/

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

Cloudinary Nuxt Module: Unknown element cld-image

cloudinary

nuxt.js