Monacaで写真を撮影し、そのFILE_URIを指定して画面に画像を表示したい

前提・実現したいこと

Monacaで写真を撮影し、画面に表示しようとしております。

発生している問題

戻り値の形式としてFILE_URI(file:///)を指定したいのですが、実機（iPhone）で確認した所、
画像が表示されません。

該当のソースコード

html
1<!DOCTYPE HTML>
2<html>
3  <head>
4    <title>PhoneGap</title>
5    <meta name="viewport" content="width=device-width, user-scalable=no">
6    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
7    <meta http-equiv="Content-Security-Policy" content="default-src * data: gap: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src *">
8    <script type="text/javascript" src="components/loader.js"></script>
9    <link rel="stylesheet" type="text/css" href="components/loader.css">
10    <script type="text/javascript">
11        document.addEventListener("deviceready", onDeviceReady, false);
12        function onDeviceReady(){
13            console.log("PhoneGap is ready.");
14        }
15    </script>
16    <link rel="stylesheet" href="phonegap-demo/master.css" type="text/css" media="screen" title="no title">
17    <script type="text/javascript" charset="utf-8" src="phonegap-demo/main.js"></script>
18  </head>
19  <body class="theme">
20    <button onclick="btn();">Get a Picture</button>
21    <img style="width:100px;height:100px" id="myImage" alt="picture"/>
22    <div id ="fn"></div>
23  </body>
24
25  <script>
26    function btn(){
27        navigator.camera.getPicture(onSuccess, onFail, { quality: 25,
28        // destinationType: Camera.DestinationType.DATA_URL //ok
29        destinationType: Camera.DestinationType.FILE_URI
30        // destinationType: Camera.DestinationType.NATIVE_URI // FILE_URIと同じ
31        });
32    }
33
34    function onSuccess(imageData) {
35      // DATA_URL
36      // var image = document.getElementById('myImage');
37      // image.src = "data:image/jpeg;base64," + imageData;
38
39      // FILE_URI
40      document.getElementById('fn').innerText = imageData;
41      var image = document.getElementById('myImage');
42      image.src = imageData; // デバッグビルド,カスタムデバッガでもng
43
44
45    }
46
47    function onFail(message) {
48        alert('Failed because: ' + message);
49    }
50  </script>
51</html>
52

試したこと

戻り値の形式をDATA_URLとした場合には表示することができました。

補足情報（FW/ツールのバージョンなど）

以下の環境で動作確認しております。
cordova：10.0.0
cordova-plugin-camera：5.0.1
ios：14.3
動作確認：ストア版 Monaca デバッガー、カスタムデバッガ、デバッグビルド

行動規範の内容に同意します

回答2件

Content-Security-Policyにmonaca-appを追加、window.WkWebView.convertFilePath()を使用してパスを変換すると表示できました

html
1<meta http-equiv="Content-Security-Policy" content="default-src * data: gap: content: monaca-app: https://ssl.gstatic.com; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">

投稿2021/06/02 08:12

masurin

総合スコア2

WKWebViewで画像を表示する場合、**window.WkWebView.convertFilePath()**を使用してパスを変換する必要があります。

以下のブログを参照してください。
WKWebViewでダウンロードしてファイル保存した画像を表示する – Cordova 10の場合 –

JavaScript
1function onSuccess(imageData) {
2  var convertSrc = (cordova.platformId == "ios") ? window.WkWebView.convertFilePath(imageData) : imageData;
3  console.log(convertSrc);
4  document.getElementById('fn').innerText = convertSrc;
5  var image = document.getElementById('myImage');
6  if (image) image.src = convertSrc;
7}