how to show image with <img> from cordova-plugin-camera

Question

I want to use the cordova-plugin-camera to show the file in the mobile phone as an tag.

    const getPicture = () => new Promise((resolve, reject) => {
        camera.getPicture(data => resolve(data), msg => reject(msg), {
            destinationType: Camera.DestinationType.FILE_URI,
            sourceType: Camera.PictureSourceType.PHOTOLIBRARY,
            mediaType: Camera.MediaType.ALLMEDIA,
            allowEdit: true,
        });
    });
    
    let url = await getPicture();
    // url is "/storage/emulated/0/DCIM/Camera/20220208_140605.jpg"

    const onsuccess = function (entry) {
        image.src = entry.toURL();
        // entry.toURL() is "https://localhost/__cdvfile_sdcard__/DCIM/Camera/20220208_140605.jpg"
    }
    const onerror = function (err) {
        console.error(`error : ${err.code}`);
    }
    if (!url.startsWith('file://')) {
        url = `file://${url}`;
    }
    window.resolveLocalFileSystemURL(url, onsuccess, onerror);

I tried it but get an error. (in remote chromium devtools)

Failed to load resource: net::ERR_CONNECTION_REFUSED

my package.json is as follows:

{
  "name": "app.hybrid.foobar",
  "displayName": "foobar",
  "version": "0.0.1",
  "main": "index.js",
  "devDependencies": {
    "cordova-android": "^10.1.2",
    "cordova-plugin-android-permissions": "^1.1.4",
    "cordova-plugin-camera": "^6.0.0",
    "cordova-plugin-file": "^7.0.0"
  },
  "cordova": {
    "plugins": {
      "cordova-plugin-android-permissions": {},
      "cordova-plugin-camera": {
        "ANDROIDX_CORE_VERSION": "1.6.+"
      },
      "cordova-plugin-file": {
        "ANDROIDX_WEBKIT_VERSION": "1.4.0"
      }
    },
    "platforms": [
      "android"
    ]
  }
}

When I searched, I saw a Data URL and wrote it in the IMG tag, but in my case, I have to display a lot of images, and the image size is big.

Is there any way?

Answer 1

This was a permission problem. I added the following to config.xml and solved the problem. The important point here seems to be a RequestLegacnyxternalStorage.

<platform name="android">
    <config-file target="AndroidManifest.xml" parent="/*">
<!-- added lines start -->
      <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- added lines end -->
      <uses-permission android:name="android.permission.CAMERA"/>
      <uses-permission android:name="android.webkit.PermissionRequest"/>
      <uses-feature android:name="android.hardware.camera"/>
      <uses-feature android:name="android.hardware.camera.autofocus"/>
      <uses-feature android:name="android.hardware.camera2.full"/>
      <uses-feature android:name="android.hardware.camera2.autofocus"/>
    </config-file>
<!-- added lines start -->
    <edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
      <application android:requestLegacyExternalStorage="true"/>
    </edit-config>
<!-- added lines end -->
  </platform>