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

同じ問題がありました。plugins/vueimagekit.jsimport ステートメントをconst {ImageKit} = require('imagekitio-vue')「ik-」コンポーネントに変更するだけで機能することがわかりました。

に plugin 行を追加することを忘れないでくださいnuxt.config.js。

于 2021-01-22T15:42:36.843 に答える
2

Imagekitik-imageは、インストールしてから componentsをインストールできるプラグインであり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>

于 2021-01-12T15:46:33.053 に答える