Handle missing/non-existent images

app.html

@@ -22,7 +22,7 @@
           Back
         </button>
         <div id="title" class="hidden">
-          <img src="img/generic_app.jpeg" alt="generic-app-icon">
+          <img id="app-icon" src="img/generic_app.jpeg" alt="generic-app-icon">
           <p>AltSource</p>
         </div>
         <a href="https://example.com" class="install hidden">
@@ -34,7 +34,7 @@
     <div class="item">
       <div class="app-header">
         <div class="content">
-          <img src="img/generic_app.jpeg" alt="generic-app-icon">
+          <img id="app-icon" src="img/generic_app.jpeg" alt="generic-app-icon">
           <div class="right">
             <div class="text">
               <p class="title">AltSource</p>

js/apps.js

@@ -18,7 +18,7 @@ function main(json) {
         if (app.screenshotURLs) {
             html += `
             <div class="screenshots">`;
-            for (let i = 0; i < app.screenshotURLs.length, i < 2; i++) html += `
+            for (let i = 0; i < app.screenshotURLs.length, i < 2; i++) if (app.screenshotURLs[i]) html += `
                 <img src="${app.screenshotURLs[i]}" class="screenshot">`;
             html += `
             </div>`;

js/main.js

@@ -35,6 +35,14 @@ function waitForAllImagesToLoad() {
         newImage.addEventListener("load", loaded);
         // Set src
         newImage.src = image.src;
+
+        // Unable to load image
+        image.addEventListener("error", (event) => {
+            if (event.target.id == "app-icon") {
+                event.target.src = "img/generic_app.jpeg";
+            } else event.target.remove()
+            loaded();
+        });
     });
 
     function loaded() {

js/shared.js

@@ -1,5 +1,5 @@
 const urlSearchParams = new URLSearchParams(window.location.search);
-const sourceURL = urlSearchParams.get('source');
+const sourceURL = urlSearchParams.get('source').replaceAll("+", "%2B");
 // https://stackoverflow.com/a/8943487
 const urlRegex = /(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig;
 
@@ -33,7 +33,7 @@ const appHeaderHTML = app => app ? `
 <div class="item">
     <div class="app-header">
         <div class="content">
-            <img src="${app.iconURL}" alt="">
+            <img id="app-icon" src="${app.iconURL}" alt="">
             <div class="right">
                 <div class="text">
                     <p class="title">${app.name}</p>