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

* Make pixel art more reliably get pixelated rendering Closes #289

* Run prettier

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,21 +63,20 @@ export default {
       default: 'eager',
     },
   },
-  mounted() {
+  data() {
-    if (this.$refs.img && this.$refs.img.naturalWidth) {
+    return {
-      const isPixelated = () => {
+      pixelated: false,
-        if (this.$refs.img.naturalWidth < 96 && this.$refs.img.naturalWidth > 0) {
-          this.$refs.img.style.imageRendering = 'pixelated'
     }
-      }
+  },
-
+  methods: {
-      if (this.$refs.img.naturalWidth) {
+    updatePixelated() {
-        isPixelated()
+      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>