0.12.4

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;

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "traxxx-web",
-  "version": "0.12.3",
+  "version": "0.12.4",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.12.3",
+      "version": "0.12.4",
       "dependencies": {
         "@brillout/json-serializer": "^0.5.8",
         "@dicebear/collection": "^7.0.5",

package.json

@@ -70,5 +70,5 @@
     "postcss-custom-media": "^10.0.2",
     "postcss-nesting": "^12.0.2"
   },
-  "version": "0.12.3"
+  "version": "0.12.4"
 }

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',