如何在 Vue.js 应用程序中使用电容器相机预览？答案

【问题标题】：How to use capacitor camera preview in a Vue.js app?如何在 Vue.js 应用程序中使用电容器相机预览？
【发布时间】：2022-10-13 00:29:35
【问题描述】：

我有一个 Vue.js 应用程序，我想使用电容器相机预览插件。但是当我在网络上运行应用程序时，我在控制台上收到此错误它也不适用于IOS。

这是插件的文档 https://github.com/capacitor-community/camera-preview#readme

这是我的组件

<template>
  <div>
    
  </div>
</template>

<script>
import '@capacitor-community/camera-preview'
import { CameraPreview } from '@capacitor-community/camera-preview';

const cameraPreviewOptions = {
  position: 'rear',
  height: 1920,
  width: 1080
};

export default {
  created() {
    CameraPreview.start(cameraPreviewOptions);
  }
}
</script>

【问题讨论】：

您使用的是哪个版本的插件？听起来您必须升级到最新版本。
谢谢你的回答，但我解决了我的问题。原来我需要将 cameraPreview 作为 id 添加到我的 html 代码中的 div

标签： vue.js capacitor capacitor-plugin

【解决方案1】：

我添加了id="cameraPreview"，我的问题已解决

<template>
  <div id="cameraPreview">
    
  </div>
</template>

【讨论】：