HTML Widget with dynamic images from table — works in QGIS but not on QField mobile

Ask the Community
1

Hi,

I’m trying to display local images in a QGIS form that works on QField Android. I tried two approaches — neither works on mobile.

Approach 1 — HTML widget with JS loop:

<div id="grid" style="display:flex;flex-direction:row;flex-wrap:wrap;gap:6px;"></div>
<script>
var grid = document.getElementById('grid');
var i = 1;
var found = true;
while(found) {
    var nom = expression.evaluate("attribute(get_feature('modeles_luminaires_804c2a33_30f1_405a_9df4_1cd41725ed16', 'fid', " + i + "), 'nom')");
    var photo = expression.evaluate("attribute(get_feature('modeles_luminaires_804c2a33_30f1_405a_9df4_1cd41725ed16', 'fid', " + i + "), 'photo')");
    if (!nom || nom === 'NULL' || nom === null) { found = false; break; }
    var imgHtml = expression.evaluate("'<img src=\"file:///' || replace(@project_folder, '\\\\', '/') || '/" + photo + "\" style=\"width:50px;height:36px;\">'");
    var div = document.createElement('div');
    div.innerHTML = imgHtml + '<div style="font-size:9px;">' + nom + '</div>';
    grid.appendChild(div);
    i++;
}
</script>

Works perfectly in QGIS Desktop. On QField Android — grid is empty, no images.

Approach 2 — QML Image widget with static hardcoded path:

Image {

width: 50
height: 36
source: 'file:///' + expression.evaluate("replace(@project_folder,'\\\\','/') || '/photos/modeles_luminaire/m1.png'"

}

Even with a fully hardcoded absolute Android path — image does not display on QField.

Questions:

  1. Does expression.evaluate() work inside a JS loop in HTML widget on QField ?
  2. Does file:/// load local images in HTML widget on QField Android ?
  3. Does QML Image widget support local file paths on Android ?
  4. What is the correct approach to display local images in QField forms ?

Thanks

2

Hello! Are you developing a plugin or something like that? Or do you just want to show images associated to a feature in a layer of the map?

3

In your form, use Attachment widget with a string type field to store image path in. Path can be stored relative or absolute depending on how you set the widget. Don’t check hyperlink option and set document viewer option to “image”.

4

Hi,

Thanks for your interaction @cuprico , I’m not developping a plugin, just trying to have something that works erfectly on mobile like on QGIS to help collectors choose the convenient model,
in attachement it looks like this in QGIS

image
image1089×913 80.8 KB

using the 1st code I shared it is fully dynamic, need to do the same or any solution. thanks

Regards

5

Hi,
Good idea, and thanks for your reply. But I have several images, see the image I shared.

6

I see, you are trying to make a sort of “gallery” of images associated with a feature then? That can also be done a different way that is compatible with QField, pretty much using the Attachment Widget, similar to what @VxTedxV mentioned.

You’ll essentially have to make a separate table on which to store the paths to the images. On that table, each record will store at least the path to the image and a foreign key that connects it uniquely to the relevant feature. It’s easier than it sounds, check this video tutorial to get an idea of how it can be made.

I think you can make, for example, a second “Models” layer on which you can allow users to add more models, if you need it to be dynamic.

7

You can also look at this QField doc : Attachment widget - QField Ecosystem Documentation

8

Hi,
Thank yu that was very insightfull, I fixed the issue using the video you shared
Regards