Adding a QML Widget with reference to a static image

Ask the Community
1

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

2

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

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

3

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

4

MathiasBaumgartinger , it works:

image
image892×791 243 KB

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

5

Amazing! Thank you works flawlessly.

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