capacitor-test/pages/nadar.vue

<template>
  <div class="nadar-page">
    <div style="text-align: center;">
      <van-image :src="src" width="200" height="200" round fit="cover" style="box-shadow: 0 0 12px rgba(0,0,0,0.1)" @click="takePicture" />
    </div>

    <pre>{{ debug }}</pre>
  </div>
</template>

<script setup lang="ts">
import { Camera, CameraResultType, CameraSource } from '@capacitor/camera'

const src = ref()
const debug = ref()

async function takePicture() {
  const photo = await Camera.getPhoto({
    resultType: CameraResultType.Uri,
    source: CameraSource.Photos,
  })

  debug.value = photo
  src.value = photo.webPath
}
</script>