Added actor avatar fallbacks.

components/actors/tile.vue

@@ -19,6 +19,13 @@
 					loading="lazy"
 					class="avatar"
 				>
+
+				<img
+					v-else
+					:src="`/img/avatars/${actor.gender || 'female'}.svg`"
+					loading="lazy"
+					class="fallback"
+				>
 			</Link>
 
 			<Icon
@@ -172,6 +179,8 @@ async function unstash() {
 .avatar-container {
 	position: relative;
 	flex-grow: 1;
+	overflow: hidden;
+	background: var(--grey-dark-40);
 }
 
 .avatar-link {
@@ -189,6 +198,14 @@ async function unstash() {
 	background-position: center 0;
 }
 
+.fallback {
+	height: 100%;
+	width: 100%;
+	display: block;
+	object-fit: contain;
+	opacity: .1;
+}
+
 .icon.heart {
 	width: 2rem;
 	height: 1.5rem;

vite.config.js

@@ -7,7 +7,14 @@ import postCssCustomMedia from 'postcss-custom-media';
 
 export default {
 	plugins: [
-		vue(),
+		vue({
+			template: {
+				transformAssetUrls: {
+					base: null,
+					includeAbsolute: false,
+				},
+			},
+		}),
 		vike({
 			redirects: {
 				'/': '/updates',