Link images in QGIS map for qgis2web Leaflet export published on GitHub?

Question

When I open the index.html file (from the qgis2web export) with my browser (locally) all my images are properly displayed.

However, after uploading my web map files to github and publishing it with GitHub pages, none of the images are displayed.

I think this could be related to my file directory's structure because when I export my web map from qgis, the "images" folder is empty.

I tried to add the images inside subsequently but this doesn't change anything.

you can check my repo here https://github.com/elieilex/Patches-map and the map here https://elieilex.github.io/Patches-map/#18/51.44431/5.45806

Answer 1

I don't know why it works for you locally, but for your map that is published on GitHub your popup construction function pop_Actions_13(feature, layer) constructs wrong image addresses.

These are the changes needed when image address is constructed from feature property:

• replacing / with _ has to be removed;
• first three characters ../ of property has to be skiped;
• property value no has to be treated the same as NULL value.

So popup construction function has to look something like this:

function pop_Actions_13(feature, layer) {
  var popupContent = '<table>\
      <tr>\
        <th scope="row">OCCURENCE</th>\
        <td>' + (feature.properties['ACTION NUMBER'] !== null ? autolinker.link(feature.properties['ACTION NUMBER'].toLocaleString()) : '') + '</td>\
      </tr>\
      <tr>\
        <th scope="row">ACTION</th>\
        <td>' + (feature.properties['ACTION'] !== null ? autolinker.link(feature.properties['ACTION'].toLocaleString()) : '') + '</td>\
      </tr>\
      <tr>\
        <th scope="row">PHOTO</th>\
        <td>' + (((feature.properties['PHOTO'] !== null) && (feature.properties['PHOTO'] !== 'no'))  ? '<img src="images/' + String(feature.properties['PHOTO']).trim().substring(3) + '" '+ 'class=popupImage' +'>' : '') + '</td>\
      </tr>\
      <tr>\
        <th scope="row">DESCRIPTION</th>\
        <td>' + (feature.properties['DESCRIPTION'] !== null ? autolinker.link(feature.properties['DESCRIPTION'].toLocaleString()) : '') + '</td>\
      </tr>\
      <tr>\
        <th scope="row">UPDATE</th>\
        <td>' + (feature.properties['UPDATE'] !== null ? autolinker.link(feature.properties['UPDATE'].toLocaleString()) : '') + '</td>\
      </tr>\
      <tr>\
        <th scope="row">photo</th>\
        <td>' + (feature.properties['updated photo'] !== null ? '<img src="images/' + String(feature.properties['updated photo']).trim().substring(3) + '" '+ 'class=popupImage' +'>' : '') + '</td>\
      </tr>\
    </table>';
  layer.bindPopup(popupContent, {maxHeight: 400});
}

Here is the result: