default icon for errored images

src/webpage/icons/sad.svg

@@ -0,0 +1 @@
+<svg width="48" height="48" xmlns="http://www.w3.org/2000/svg"><circle style="fill:#272831;fill-opacity:1;stroke:#fe0000;stroke-width:0;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none" cx="24" cy="24" r="20"/><path style="fill:none;fill-rule:evenodd;stroke:#000;stroke-width:4;stroke-linecap:round;stroke-dasharray:none" d="M3 58C2 48 7 38 15 32" transform="scale(.83333) rotate(66 21 59)"/><path style="fill:#1a1a1a;fill-opacity:1;stroke:#000;stroke-width:3.33334;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1" d="M18 12v10M30 12v10"/></svg>

src/webpage/style.css

@@ -3039,6 +3039,19 @@ fieldset input[type="radio"] {
 	font-size: 0.2in;
 	padding: 0 0.1in;
 }
+img.error {
+	position: relative;
+}
+img.error::after {
+	background: var(--secondary-bg) url("/icons/sad.svg");
+	background-size: contain;
+	content: "";
+	width: 100%;
+	height: 100%;
+	position: absolute;
+	top: 0;
+	left: 0;
+}
 .gifBox {
 	img {
 		max-width: 196px;

src/webpage/utils/utils.ts

@@ -599,6 +599,9 @@ export function createImg(
 	const settings =
 		localStorage.getItem("gifSetting") || ("hover" as "hover") || "always" || "never";
 	const img = document.createElement("img");
+	img.addEventListener("error", () => {
+		img.classList.add("error");
+	});
 	elm ||= img;
 	if (src && isAnimated(src)) {
 		img.crossOrigin = "anonymous";