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

Question

我使用的是Imagekit VueJS SDK，并为它创建了一个插件文件：

/plugins文件夹中的vueimagekit.js。

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

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

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

Answer 2

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

<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>