Adding a QML Widget with reference to a static image

Hi there!

In QGIS i have configured a “guiding” image using a QML Widget:

import QtQuick 2.0

Image {
    width: 300
    height: 300
    source: {
        text: expression.evaluate("concat(replace(replace( project_folder,'\\\\','/'),'C:',''),
                                      '/guide.png')")
    }
}

This should aid mappers in the field in using the “right” options. The image is properly displayed when using QGIS. In QField however, where the image should be, only white background is shown. I have verified the existence of guide.png.

Any ideas on how i might get this to work?


Imported from GitHub discussion by @MathiasBaumgartinger on 2025-03-28T08:24:47Z

MathiasBaumgartinger , could you provide us with a small test project? Thanks.


Imported from GitHub comment by @nirvn on 2025-03-28T09:26:22Z

I have below attached a test project. Simply try to add a new sample point in the original file in QGIS (image is shown properly) and then in QField (no image is rendered).

TestQFIELD.zip


Imported from GitHub comment by @MathiasBaumgartinger on 2025-03-28T10:03:33Z

MathiasBaumgartinger , it works:

The problem was with the value you were setting for the Image’s source property. It is meant to be a URL, and you need to explicitly state that it’s a file. This will work:

Image {
    width: 300
    height: 300
    source: 'file://' + expression.evaluate("concat(replace(replace( project_folder,'\\\\','/'),'C:',''),
                                      '/guide.jpg')")
}

Imported from GitHub comment by @nirvn on 2025-03-28T10:08:56Z

Amazing! Thank you works flawlessly.


Imported from GitHub comment by @MathiasBaumgartinger on 2025-03-28T10:21:50Z