qgis2web plugin produces a webmap with an 'image' icon instead of the attached image.

[hpethen]

I have successfully used QGIS2Web 3 plugin to create a webmap, but the attached images are not appearing in the webmap popups.

I have a small database of sites, two of which have attached images linked in the attribute table. The attached images are stored on my computer, and are recorded in the attribute table of the shapefile as a filepath. In the 'Attribute forms' field of the layer the filepaths are all set to absolute, the Widget type is set to 'Attachment' and the 'Integrated Document Viewer' is set to 'Image'. The images appear in the desktop QGIS popup when 'Attribute forms' is selected.

When I use the qgis2web plugin to create an OpenLayers or Leaflet map, the resulting website appears perfectly fine, but the images are not shown in the popup, instead the webmap produces an 'image' icon, but not the actual image. I have researched this extensively, tested changing various parameters, and also followed the instructions on this previous github post #661, but nothing works.

My only remaining thought was that the popup appears quite narrow compared to the webpage and I wondered if that was affecting it, but I cannot figure out how to make the popup wider either.

You can see the webmap at https://hpethen.github.io/EES_Delta_Survey_Test/

[andreaordonselli]

You can consult the documentation at this address: https://qgis2web.github.io/qgis2web/#setLayers

This is specifically described in the Image or Video subchapter:

Image or Video If you want to show images or video in popup you must set Widget Type to "Attachment" and do not change other values. Only the Absolute path is supported: enter image description here

Set the absolute path as the field text:

The result in your map will look like this

or this, for video

For the width of the popup you can edit the qgis2web.css file present in the "resources" folder of your export. Increase these values

    th {
        min-width: 100px;
    }
    td {
        min-width: 100px;
    }

Warning: the popup would probably be larger if you exported with the full-screen template rather than canvas-size. You can find the option in the Appearance tab of the plugin.

[hpethen]

Thank you for responding. I have consulted the Wiki and various similar questions. In case I had made a mistake in changing the widget to 'Attachment' I re-added the file and setup the widgets again, changing on the 'Widget type' to 'Attachment' in the relevant attribute field. I attach my screenshot so you can see how the widget looks if I only change Widget type to Attachment. I also changed the Appearance to 'full-screen' template rather than canvas size, but I am getting exactly the same result. The popup appears perfectly except that the image is represented by an 'image icon' instead of appearing in the popup.

[andreaordonselli]

can you provide a screenshot of the data table to see the paths to the images? another thing, after exporting you can right click on the icon in the popup that you see instead of the image and select inspect? what does the browser console show you? can you make a screenshot of this too?

[hpethen]

Here is the screenshot of the attribute table showing the paths - the two images are jpgs on my D drive as you can see.

And here is what the browser console shows me if I right click the icon and select inspect.

[andreaordonselli]

In the browser console, extend the tr and its children until you get to the "img" element, that is the path where the image is searched for, what path is written there? Do you notice a strange path? It should point to the "images" folder of the exported project.

Make sure the image link you wrote D:/ etc... is correct.

Do these tests in the local export before uploading it to hpethen.github.io, I don't want images to be excluded when uploading to the site.

[hpethen]

So I haven't uploaded anything to Github since my original post. I expanded the tr and its children. Here is the screenshot:

The filepath to the image in the screenshot is correct. When I hover over the link it gives me the whole link to qgis2web folder on my local machine, followed by the filepath of the image from the attribute table. Like this:

[andreaordonselli]

Everything seems correct. I don't understand the problem. Can you send a zip with your qgis file, data and images?

[hpethen]

I agree it does seem odd. Here is the zip. You'll have to redirect the absolute paths of course, but the shapefiles and images are all there.
QGIS2Web_attachmenttest.zip

[andreaordonselli]

I changed the path to point to the jpg files in my folder.

I changed the field to Attachment.

I exported. Works.

I don't understand what the problem could be with your PC.
Here exported project:
qgis2web_2024_05_23-16_21_00_269526.zip

[hpethen]

How odd - maybe I just need to rebuild it? Thank you for your help. I will rebuild it and see if it works.

[andreaordonselli]

Double check the path to the jpg files and the attachment setting of the field.

[hpethen]

I've FOUND it! My computer has both an internal C and D drive and I normally use the D Drive for my documents because that's the SSD! When I shifted the images to the C Drive, the attachment worked and the images now appear in the QGIS 2Web export!

[andreaordonselli]

I'm glad you solved it.

Please consider donating a virtual coffee via the button on the home page for qgis2web development and support.

Thank you.