Fix a bug where image were loaded multiple times

packages/ui/atoms/Figure/Figure.ts

@@ -52,6 +52,13 @@ export class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView
     this.$refs.img.src = value;
   }
 
+  /**
+   * Get the original source.
+   */
+  get original() {
+    return this.$refs.img.dataset.src;
+  }
+
   /**
    * Load on mount.
    */
@@ -66,7 +73,7 @@ export class Figure<T extends BaseProps = BaseProps> extends withMountWhenInView
       throw new Error('[Figure] The `img` ref must be an `<img>` element.');
     }
 
-    const { src } = img.dataset;
+    const src = this.original;
 
     if (this.$options.lazy && src && src !== this.src) {
       let tempImg = new Image();

packages/ui/atoms/Figure/FigureTwicpics.ts

@@ -54,7 +54,7 @@ export class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<
   /**
    * Get the Twicpics path.
    */
-  get path():string {
+  get path(): string {
     return withoutTrailingSlash(withoutLeadingSlash(this.$options.path));
   }
 
@@ -67,15 +67,22 @@ export class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<
   }
 
   /**
-   * Add Twicpics transforms, path and domain to the URL.
+   * Get formattted original source.
    */
-  set src(value: string) {
-    const url = new URL(value, 'https://localhost');
+  get original() {
+    return this.formatSrc(super.original);
+  }
+
+  /**
+   * Format the source for Twicpics.
+   */
+  formatSrc(src: string): string {
+    const url = new URL(src, 'https://localhost');
     url.host = this.domain;
     url.port = '';
 
     if (this.path) {
-      url.pathname = `/${this.path}${url.pathname}`
+      url.pathname = `/${this.path}${url.pathname}`;
     }
 
     const width = normalizeSize(this, 'offsetWidth');
@@ -90,14 +97,14 @@ export class FigureTwicpics<T extends BaseProps = BaseProps> extends Figure<
 
     url.search = decodeURIComponent(url.search);
 
-    super.src = url.toString();
+    return url.toString();
   }
 
   /**
    * Reassign the source from the original on resize.
    */
   resized() {
-    this.src = this.$refs.img.dataset.src;
+    this.src = this.original;
   }
 
   /**