0

我正在使用 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
})

我还将它附加plugins: [ '~/plugins/vueimagekit.js']到nuxt.config.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>

有人对我如何正确执行此操作有任何提示吗？谢谢！

4

2 回答 2

2

Imagekit是一个可以安装然后组件的插件，可以在ik-image你的应用程序的任何地方全局使用，如果你想使用，或者单独在你的特定文件中，那么你不需要注册插件，你可以导入相应的该文件中的组件并使用组件来加载图像，而不是像这样 -ik-uploadik-contextIKImageIKContextIKUploadImagekitIKImageik-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>

于 2021-01-12T15:46:33.053 回答
2

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

不要忘记在nuxt.config.js.

于 2021-01-22T15:42:36.843 回答