Imagekit SDK和NuxtJS：如何正确导入SDK？

Question

我正在使用 Imagekit VueJS SDK 并为其创建了一个插件文件：

vueimagekit.js 在 /plugins 文件夹中。

import ImageKit from "imagekitio-vue"

Vue.use(ImageKit, {
  urlEndpoint: "your_url_endpoint", // Required. Default URL-endpoint is https://ik.imagekit.io/your_imagekit_id
  publicKey: "your_public_api_key", // optional
  authenticationEndpoint: "https://www.your-server.com/auth" // optional
  // transformationPosition: "path" // optional
})

我也把它附加到 nuxt.config.js 的 plugins: [ '~/plugins/vueimagekit.js'] 区域。我的代码模板是这样使用它的：

    <ik-image
      width="400"
      src="https://ik.imagekit.io/omnsxzubg0/iss061e098033_lrg_x2pIAiRxk.jpg"
    >
    </ik-image>

这在我的应用程序中运行良好。但是，文档指出我也可以根据需要单独导入组件，如下所示：

import { IKImage, IKContext, IKUpload } from "imagekitio-vue"

export default {
  components: {
    IKImage,
    IKContext,
    IKUpload
  }
}

因此，我尝试在我的 plugins/vueimagekit.js 文件中执行此操作，但没有成功：

import Vue from 'vue'
import { IKImage } from 'imagekitio-vue'
Vue.use(IKImage, {
  urlEndpoint: 'https://ik.imagekit.io/omnsxzubg0/'
  // publicKey: "your_public_api_key",
  // authenticationEndpoint: "https://www.your-server.com/auth"
})

我在控制台中收到以下错误：

vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <ik-image> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Pages/photos/index.vue> at pages/photos/index.vue
       <Nuxt>
         <Layouts/default.vue> at layouts/default.vue
           <Root>

有人知道如何正确执行此操作吗？谢谢！

Answer 1

Imagekit 是一个可以安装的插件，然后组件 ik-image、ik-upload 和 ik-context 可以在您的应用程序的任何地方全局使用，如果你想在您的特定文件中单独使用 IKImage、IKContext 或 IKUpload 然后您不需要注册 Imagekit 插件，您只需在该文件中导入相应的组件，然后使用 IKImage 组件加载图像而不是像这样的 ik-image -

<IKImage :publicKey="publicKey" :urlEndpoint="urlEndpoint" :src="your_image_src" />

或者像这样

<IKContext :publicKey="publicKey" :urlEndpoint="urlEndpoint"> <IKImage :path="your_image_path" :transformation="[{ height: 300, width: 400 }]" /> </IKContext>

Answer 2

我遇到了同样的问题。我发现只需将 plugins/vueimagekit.js 中的导入语句更改为 const {ImageKit} = require('imagekitio-vue')，“ik-”组件就可以工作。

不要忘记在 nuxt.config.js 中添加插件行。

Imagekit SDK和NuxtJS：如何正确导入SDK？

Imagekit SDK and NuxtJS: How to import SDK correctly?

imagekit

vue.js