0

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

enter image description here

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

enter image description here

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

1

1 Answer 1

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:

enter image description here

1
  • Thank you so much ! I suspected that the replacement of / with _ has to and the first three characters ../ of property were an issue but I honestly had no clue how to address it. Thank you for the code :)
    – elsek
    Dec 28, 2023 at 10:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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