I have consulted the post on GIS stack exchange and read the docs, however I cannot find a solution that works.

The idea is to put a .png image of a site report within the maplayer for web output. The points show up fine but the popup image does not.

The column that holds the file name for the image has been formatted in the following ways (plus many more varieties):

  1. "filename.png" #<---------- images in the same folder as the project
  2. "images/filename.png"#<-------- images in an images "folder" in the samefolder as the project

  3. "../images/filename.png"

Mulitple variations on this have been tried by loading the different methods in the attribute table and having as pop up value(output from most recent try):

screen shot of preview qgis2web

The field attributes are set to photo:

field attributes

I have taken a look at the output generated by the script in the Data folder that holds the css, js and other files associated with the webpage export(in my case these files go to 'users>me>AppData>Local>Temp>qgis2web>folder'

The data is in a dictionary of dicts I put the first one here:

{ "type": "Feature", "properties": { "field_1": "Aare_Bern_CaveltiN", "Density": 1.61, "lon_x1": 7.4733190977753496, "lat_y1": 46.923578788505381, "City": "Muri bei Bern", "File": "Aare_Bern_CaveltiN.png", "FileName": "\"\\images\\Aare_Bern_CaveltiN.png\"", "Source": "<img source =\"\\images\\Aare_Bern_CaveltiN.png\" width=\"400\" height=\"600΅ \/>", "File2": "\"Aare_Bern_CaveltiN.png\"", "FileNameThree": "\"images\\Aare_Bern_CaveltiN.png\"", "FileNameFour": "<img source =\"Aare_Bern_CaveltiN.png\" width=\"400\" height=\"600΅ \/>", "FileNameFive": "\"<img source =\"\\images\\Aare_Bern_CaveltiN.png\" width=\"400\" height=\"600΅ \/>\"" }, "geometry": { "type": "Point", "coordinates": [ 7.47331909777535, 46.923578788505381 ] } }

I cannot figure out exactly what needs to be passed on to the plugin for this to work. Nor are the examples I have found clearing this up.

Is it an absolute path or relative path? Path to where? Although the project is one folder the output goes to temp.

Or maybe even more precise: When I call the column value from python (before exporting csv for the map layer) like this: print(df['filename'][0])

where df=layer data and filename = column that holds the files.

Should I see this: "filename.png" (in quotes) or this: filename.png (no quotes)?

  • I am assuming that the script is at least seeing the image because of the size of the image frame in the pop up. Sep 24, 2017 at 6:29

1 Answer 1


Once you set the edit widget to 'Photo', use that widget to select the images. The plugin doesn't care where the source images are, as it copies them to the export folder.

Update Apologies - it lokos like you've uncovered a bug. I've opened an issue on Github, so please follow progress there: https://github.com/tomchadwin/qgis2web/issues/546

Update 2 I believe the issue is now fixed. If you are able, please download master branch from Github (link above) and try it out. It would be great to confirm that it is now working. Look out for qgis2web v2.28.0 in the QGIS plugins repo soon.

  • I am sorry, I so not see the option to select images with the widget. Sep 24, 2017 at 11:56
  • Once the widget "Photo" is selected there is a pop-up window entitled : " Edit widget properties" . There is no file selection option. Sep 24, 2017 at 12:20
  • I think Tom would say use the form to edit the feature and select the photo you want here. Sep 24, 2017 at 21:30
  • Yeah, I get nothing. either way, I just tried running the absolute path "C:\...." and once using the expression <img source="absolute path" width="400" height="600" /> Sep 24, 2017 at 22:04
  • When I pass the 'img source' tag the script picks up the size values and the resulting pop up reflects that. Sep 24, 2017 at 22:20

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.