Make pixel art more reliably get pixelated rendering (#1077)

* Make pixel art more reliably get pixelated rendering Closes #289 * Run prettier
modrinth · Apr 8, 2023 · c731515 · c731515
1 parent 8d85158
commit c731515
Showing 1 changed file with 19 additions and 13 deletions.
diff --git a/components/ui/Avatar.vue b/components/ui/Avatar.vue
@@ -2,10 +2,13 @@
   <img
     v-if="src"
     ref="img"
-    :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''}`"
+    :class="`avatar size-${size} ${circle ? 'circle' : ''} ${noShadow ? 'no-shadow' : ''} ${
+      pixelated ? 'pixelated' : ''
+    }`"
     :src="src"
     :alt="alt"
     :loading="loading"
+    @load="updatePixelated"
   />
   <svg
     v-else
@@ -60,20 +63,19 @@ export default {
       default: 'eager',
     },
   },
-  mounted() {
-    if (this.$refs.img && this.$refs.img.naturalWidth) {
-      const isPixelated = () => {
-        if (this.$refs.img.naturalWidth < 96 && this.$refs.img.naturalWidth > 0) {
-          this.$refs.img.style.imageRendering = 'pixelated'
-        }
-      }
-
-      if (this.$refs.img.naturalWidth) {
-        isPixelated()
+  data() {
+    return {
+      pixelated: false,
+    }
+  },
+  methods: {
+    updatePixelated() {
+      if (this.$refs.img && this.$refs.img.naturalWidth && this.$refs.img.naturalWidth <= 96) {
+        this.pixelated = true
       } else {
-        this.$refs.img.onload = isPixelated
+        this.pixelated = false
       }
-    }
+    },
   },
 }
 </script>
@@ -116,5 +118,9 @@ export default {
   &.no-shadow {
     box-shadow: none;
   }
+
+  &.pixelated {
+    image-rendering: pixelated;
+  }
 }
 </style>