Я использую 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>
У кого-нибудь есть какие-либо советы о том, как я могу сделать это правильно? Спасибо!
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>
Спасибо, я попробую и дам вам знать!
У меня была такая же проблема. Я обнаружил, что, просто изменив оператор импорта в plugins/vueimagekit.js на const {ImageKit} = require('imagekitio-vue'), компоненты «ik-» работают.
Не забудьте добавить строку плагина в nuxt.config.js.
Я также убедился, что перенес сборку, но все равно получаю ту же ошибку.