Use full path, to be compatible both on localhost and on GitHub page.

screenshots/html/data.js

@@ -1,7 +1,6 @@
 // Generated file, do not edit
 export const screenshots = [
 ["en","de",],
-["./tests/uitests/src/test/snapshots/images","./screenshots/de",],
 ["ui_S_t[f.preferences.impl.about_AboutView_null_AboutView-Day-0_1_null_0,NEXUS_5,1.0,en]",1,],
 ["ui_S_t[f.login.impl.accountprovider_AccountProviderView_null_AccountProviderView-Day-0_1_null_0,NEXUS_5,1.0,en]",0,],
 ["ui_S_t[f.login.impl.accountprovider_AccountProviderView_null_AccountProviderView-Day-0_1_null_1,NEXUS_5,1.0,en]",0,],

screenshots/html/script.js

@@ -15,8 +15,18 @@
  */
  import { screenshots } from './data.js';
 
+// Get the base url of the current page
+const baseUrl = window.location.href.split('/').slice(0, -1).join('/');
+// On localhost, get the English screenshots from the location `../tests/uitests/src/test/snapshots/images`
+const isLocalHost = window.location.hostname === "localhost"
+let englishBasePath
+if (isLocalHost) {
+  englishBasePath = `../tests/uitests/src/test/snapshots/images`
+} else {
+  englishBasePath = `en`
+}
+
 const dataLanguages = screenshots[0];
-const dataPaths = screenshots[1];
 
 // Read default visible languages from the fragment
 const fragment = new URLSearchParams(window.location.hash.substring(1));
@@ -121,10 +131,9 @@ function addTable() {
     languagesHeaderRow.appendChild(th);
   }
   const numVisibleLanguages = languagesHeaderRow.childElementCount
-  // Second item contains the paths
   // Next items are the data
   var currentHeaderValue = "";
-  for (let screenshotIndex = 2; screenshotIndex < screenshots.length; screenshotIndex++) {
+  for (let screenshotIndex = 1; screenshotIndex < screenshots.length; screenshotIndex++) {
     let englishFile = screenshots[screenshotIndex][0];
     const tr = document.createElement('tr');
     let hasTranslatedFiles = false;
@@ -134,10 +143,10 @@ function addTable() {
       }
       const td = document.createElement('td');
       if (languageIndex == 0) {
-        const fullFile = `${dataPaths[0]}/${englishFile}.png`;
+        const fullFile = `${englishBasePath}/${englishFile}.png`;
         const img = document.createElement('img');
         img.className = "screenshot";
-        img.src = `../${fullFile}`;
+        img.src = `${baseUrl}/${fullFile}`;
         img.title = fullFile;
         img.alt = "Missing image";
         img.width = imageWidth;
@@ -153,10 +162,10 @@ function addTable() {
           hasTranslatedFiles = true;
           // Foreign file is the same as the english file, replacing the language
           const foreignFile = englishFile.replace("en]", `${dataLanguages[languageIndex]}]`).replace("_S_", "_T_")
-          const fullForeignFile = `${dataPaths[languageIndex]}/${foreignFile}.png`;
+          const fullForeignFile = `${dataLanguages[languageIndex]}/${foreignFile}.png`;
           const img = document.createElement('img');
           img.className = "screenshot";
-          img.src = `../${fullForeignFile}`;
+          img.src = `${baseUrl}/${fullForeignFile}`;
           img.title = fullForeignFile;
           img.alt = "Missing image";
           img.width = imageWidth;