How do I display an image full width in the app?

General Q&A
,
1

I would like to display an image (i.e. a logo) full width in the app on the main view.

In this case the caveat is that the specific image that I wish to display depends on the user, which means that I want to store the range of images in the DB.

With display-photo the image isn't scaled to the full width anymore, so is there an alternative for me?

2

As of version 4.74 of the runtime, the display-photo and capture-photo components show the photo in a smaller format that is more user friendly for how most users will interact with photos in their apps. As a result, the use case mentioned in the question doesn't work anymore as of this version.

As an alternative (to achieve the same result), you can do the following using display-image:

In the XML:

<display-image src="{$:getDisplayImage()}" />

In the JS:

function getDisplayImage() {
    var logo = DB.logo.first()
    return logo.name;
}

A caveat is that this will only work for PNG images. We tested this in 4.75 of the runtime.

2 Likes
3

To clarify the above answer, you will still need to store the images as assets in your app, and then the logo model is merely a way to store the filenames of the assets so that you can dynamically change them. You could achieve the same thing without using the DB by listing the list of logo filenames in the View JS.