NativeScript / NativeScript/plugins

imagepicker with NativeScript Vue is not working

未關閉
#573 3 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

主要語言
TypeScript
星號
206
分支
123
平均合併
2 天 1 小時
30 天內合併 PR
1

描述

Hello,

I'm writing an application in nativescript vue where I need to pick an image on iOS Photo Library.
For that I wanted to use the imagepicker plugin.

Authorization is working and I can select the pictures, but unfortunately as result I got that the uri is undefined.
Here after my code :

<template>
  <Page @loaded="onPageLoaded">
      <ActionBar title="Select Image" />
      <StackLayout>
          <Button text="Select Image" @tap="onSelectImageTap" />
          <Image v-if="selectedImage" :src="selectedImage" stretch="aspectFill" />
      </StackLayout>
  </Page>
</template>
<script>
import * as ImagePicker from 'nativescript-imagepicker';
export default {
  data() {
      return {
          selectedImage: null,
          imagePicker: null // Initialize imagePicker property
      };
  },
  methods: {
      onPageLoaded() {
          this.imagePicker = ImagePicker.create({
              mode: 'single' // or 'multiple'
          });
      },
      async onSelectImageTap() {
          try {
              if (!this.imagePicker) {
                  console.error('ImagePicker is not initialized.');
                  return;
              }
              await this.imagePicker.authorize();
              const selection = await this.imagePicker.present();
              console.log('Selection:', selection.map(item => ({ uri: item.uri })));
              if (selection && selection.length > 0 && selection[0].uri) {
                  this.selectedImage = selection[0].uri;
              } else {
                  console.error('No image selected or URI is undefined.');
              }
          } catch (error) {
              console.error('Error selecting image:', error);
          }
      }
  }
};
</script>

It seems that the same issue is happing also on the demo available under : https://www.npmjs.com/package/@nativescript/imagepicker#demo -> https://stackblitz.com/edit/nativescript-vue3-beta-krjk9k?file=app%2Fcomponents%2FHome.vue,app%2Fapp.css

Can you support me on this issue?

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

先在 iOS 上執行連結的 StackBlitz 示範,並檢查 app/components/Home.vue;app/app.css 是示範的一部分,可以使用。重現影像選取,並將傳回的選取物件與 issue 中記錄的 undefined uri 進行比較。當選取的影像在 NativeScript Vue 範例中提供可用的 URI 時,即表示完成。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
ios, typescript
領域
mobile-dev
Issue 類型
缺陷
難度
4/5
預估耗時
3-5 天
活躍度
停滯
描述清晰度
需要釐清
新手友好度
25/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。