Display Images and Photos in Your App

Display an Image using AppImage

This first example fills the whole page with an AppImage. Since the image does not match the page aspect ratio, it will be distorted.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   NavigationStack {

     Page {
       title: "Hello V-Play"

       AppImage {
         // The image fills the page completely, this can cause distortion depending on the image size
         anchors.fill: parent
         source: "https://v-play.net/web-assets/girl.jpg"
       }
     }
   }
 }

In the next example, we chose another fillMode to avoid distortion.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   NavigationStack {

     Page {
       title: "Hello V-Play"

       AppImage {
         anchors.fill: parent
         // You can try different fillModes
         fillMode: Image.PreserveAspectFit
         //fillMode: Image.PreserveAspectCrop
         //fillMode: Image.Tile
         source: "https://v-play.net/web-assets/girl.jpg"
       }
     }
   }
 }

Display a RoundedImage

Rounded images are very common in apps, this is why V-Play offers the RoundedImage type, that lets you add a radius to an image.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {

   NavigationStack {

     Page {
       title: "Hello V-Play"

       RoundedImage {
         anchors.centerIn: parent
         width: dp(200)
         height: dp(200)
         fillMode: Image.PreserveAspectCrop
         source: "https://v-play.net/web-assets/girl.jpg"
         // Using half the width as radius causes a full circle
         radius: width/2
       }
     }
   }
 }

Display Fullscreen Image Preview

You can also use a basic fullscreen image preview component, the PictureViewer.

 import VPlayApps 1.0
 import QtQuick 2.0

 App {
   id: app

   NavigationStack {

     Page {
       title: "Hello V-Play"

       AppButton {
         text: "Show Photo"
         onClicked: {
           // Open PictureViewer component
           PictureViewer.show(app, "https://v-play.net/web-assets/girl.jpg")
         }
       }
     }
   }
 }

You can use the NativeUtils::displayImagePicker function to open the native image gallery select dialog.

 import VPlayApps 1.0
 import VPlay 2.0
 import QtQuick 2.9

 App {
   id: app

   NavigationStack {

     Page {

       AppImage {
         id: image
         anchors.fill: parent
         // important to automatically rotate the image taken from the camera
         autoTransform: true
         fillMode: Image.PreserveAspectFit
       }

       AppButton {
         anchors.centerIn: parent
         text: "Display CameraPicker"
         onClicked: {
           nativeUtils.displayImagePicker("test")
         }
       }

       Connections {
         target: nativeUtils
         onImagePickerFinished: {
           if(accepted) image.source = path
         }
       }
     }
   }
 }

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support