diff --git a/demo/bin/libs/fairygui/fairygui.js b/demo/bin/libs/fairygui/fairygui.js
index c7348788..e420e751 100644
--- a/demo/bin/libs/fairygui/fairygui.js
+++ b/demo/bin/libs/fairygui/fairygui.js
@@ -14922,6 +14922,114 @@
     }
 })(fgui);
 
+(function (fgui) {
+    var Texture = Laya.Texture;
+    var HTMLImageElement = Laya.HTMLImageElement;
+    const proto = HTMLImageElement.prototype;
+    const reset = proto.reset;
+    const src = Object.getOwnPropertyDescriptor(proto, 'src').set;
+    Object.defineProperties(proto, {
+        // @Overwrite
+        reset: {
+            // Call in constructor and destroy
+            value() {
+                return reset.call(this._stop()._resetAni());
+            }
+        },
+        _resetAni: {
+            value() {
+                this._tex = null;
+                this._frame = 0;
+                this._reverse = false;
+                this._pi = null;
+                return this;
+            }
+        },
+        _stop: {
+            value() {
+                Laya.timer.clear(this, this._drawImage);
+                return this;
+            }
+        },
+        _drawImage: {
+            value(graphic, gX, gY) {
+                let tex = this._tex;
+                if (!tex || !tex.getIsReady())
+                    return;
+                if (!this.parent || this.parent._children.length === 0) {
+                    // TODO I think there have a bug in laya, So I wrote this code
+                    // Detail: https://github.com/porky-prince/LayaAir/commit/dd565d30b8d43f453bb784d0c63d978fca8375de
+                    this._stop();
+                    return;
+                }
+                const width = this.width || tex.width;
+                const height = this.height || tex.height;
+                const pi = this._pi;
+                if (pi) {
+                    const frames = pi.load();
+                    const curFrame = frames[this._frame];
+                    let delay = pi.interval + curFrame.addDelay;
+                    const border = !this._reverse ? frames.length - 1 : 0;
+                    const i = !this._reverse ? 1 : -1;
+                    if (this._frame === border) {
+                        if (pi.swing) {
+                            this._reverse = !this._reverse;
+                            this._frame -= i;
+                        }
+                        else {
+                            this._frame = 0;
+                        }
+                        delay += pi.repeatDelay;
+                    }
+                    else {
+                        this._frame += i;
+                    }
+                    this._tex = frames[this._frame].texture; // Next frame
+                    Laya.timer.once(delay, this, this._drawImage, [graphic, gX, gY]);
+                }
+                graphic.drawImage(tex, gX, gY, width, height);
+            }
+        },
+        // @Overwrite
+        renderSelfToGraphic: {
+            value(graphic, gX, gY) {
+                this._stop()._drawImage(graphic, gX, gY);
+            }
+        },
+        // @Overwrite
+        src: {
+            set(url) {
+                if (fgui.ToolSet.startsWith(url, "ui://")) {
+                    if (this._url === url)
+                        return;
+                    this._stop()._resetAni();
+                    const pi = fgui.UIPackage.getItemByURL(url);
+                    let tex = null;
+                    // Asset must be preloaded
+                    if (pi) {
+                        const asset = pi.load();
+                        if (asset instanceof Texture) {
+                            tex = asset;
+                        }
+                        else if (pi.type === fgui.PackageItemType.MovieClip && Array.isArray(asset) && asset.length > 0) {
+                            // Assuming that each texture is the same size, just layout once
+                            tex = asset[0].texture;
+                            if (asset.length > 1)
+                                this._pi = pi;
+                        }
+                        this._tex = tex;
+                        tex && this.onloaded();
+                    }
+                }
+                else {
+                    // Dynamic loading asset
+                    src.call(this, url);
+                }
+            }
+        }
+    });
+})(fgui);
+
 (function (fgui) {
     class Image extends Laya.Sprite {
         constructor() {
@@ -17648,7 +17756,7 @@
             if (pos1 < this._text.length)
                 result += this._text.substr(pos1);
             this._text = null;
-            return result;
+            return result.replace(/\n/g, '<br>');
         }
     }
     UBBParser.inst = new UBBParser();
diff --git a/demo/libs/fairygui.d.ts b/demo/libs/fairygui.d.ts
index f4e21a5c..b87801db 100644
--- a/demo/libs/fairygui.d.ts
+++ b/demo/libs/fairygui.d.ts
@@ -1964,6 +1964,8 @@ declare namespace fgui {
 declare namespace fgui {
     function fillImage(w: number, h: number, method: number, origin: number, clockwise: boolean, amount: number): number[];
 }
+declare namespace fgui {
+}
 declare namespace fgui {
     class Image extends Laya.Sprite {
         protected _source: Laya.Texture;
diff --git a/source/bin/fairygui.d.ts b/source/bin/fairygui.d.ts
index f4e21a5c..b87801db 100644
--- a/source/bin/fairygui.d.ts
+++ b/source/bin/fairygui.d.ts
@@ -1964,6 +1964,8 @@ declare namespace fgui {
 declare namespace fgui {
     function fillImage(w: number, h: number, method: number, origin: number, clockwise: boolean, amount: number): number[];
 }
+declare namespace fgui {
+}
 declare namespace fgui {
     class Image extends Laya.Sprite {
         protected _source: Laya.Texture;
diff --git a/source/bin/fairygui.js b/source/bin/fairygui.js
index c7348788..e420e751 100644
--- a/source/bin/fairygui.js
+++ b/source/bin/fairygui.js
@@ -14922,6 +14922,114 @@
     }
 })(fgui);
 
+(function (fgui) {
+    var Texture = Laya.Texture;
+    var HTMLImageElement = Laya.HTMLImageElement;
+    const proto = HTMLImageElement.prototype;
+    const reset = proto.reset;
+    const src = Object.getOwnPropertyDescriptor(proto, 'src').set;
+    Object.defineProperties(proto, {
+        // @Overwrite
+        reset: {
+            // Call in constructor and destroy
+            value() {
+                return reset.call(this._stop()._resetAni());
+            }
+        },
+        _resetAni: {
+            value() {
+                this._tex = null;
+                this._frame = 0;
+                this._reverse = false;
+                this._pi = null;
+                return this;
+            }
+        },
+        _stop: {
+            value() {
+                Laya.timer.clear(this, this._drawImage);
+                return this;
+            }
+        },
+        _drawImage: {
+            value(graphic, gX, gY) {
+                let tex = this._tex;
+                if (!tex || !tex.getIsReady())
+                    return;
+                if (!this.parent || this.parent._children.length === 0) {
+                    // TODO I think there have a bug in laya, So I wrote this code
+                    // Detail: https://github.com/porky-prince/LayaAir/commit/dd565d30b8d43f453bb784d0c63d978fca8375de
+                    this._stop();
+                    return;
+                }
+                const width = this.width || tex.width;
+                const height = this.height || tex.height;
+                const pi = this._pi;
+                if (pi) {
+                    const frames = pi.load();
+                    const curFrame = frames[this._frame];
+                    let delay = pi.interval + curFrame.addDelay;
+                    const border = !this._reverse ? frames.length - 1 : 0;
+                    const i = !this._reverse ? 1 : -1;
+                    if (this._frame === border) {
+                        if (pi.swing) {
+                            this._reverse = !this._reverse;
+                            this._frame -= i;
+                        }
+                        else {
+                            this._frame = 0;
+                        }
+                        delay += pi.repeatDelay;
+                    }
+                    else {
+                        this._frame += i;
+                    }
+                    this._tex = frames[this._frame].texture; // Next frame
+                    Laya.timer.once(delay, this, this._drawImage, [graphic, gX, gY]);
+                }
+                graphic.drawImage(tex, gX, gY, width, height);
+            }
+        },
+        // @Overwrite
+        renderSelfToGraphic: {
+            value(graphic, gX, gY) {
+                this._stop()._drawImage(graphic, gX, gY);
+            }
+        },
+        // @Overwrite
+        src: {
+            set(url) {
+                if (fgui.ToolSet.startsWith(url, "ui://")) {
+                    if (this._url === url)
+                        return;
+                    this._stop()._resetAni();
+                    const pi = fgui.UIPackage.getItemByURL(url);
+                    let tex = null;
+                    // Asset must be preloaded
+                    if (pi) {
+                        const asset = pi.load();
+                        if (asset instanceof Texture) {
+                            tex = asset;
+                        }
+                        else if (pi.type === fgui.PackageItemType.MovieClip && Array.isArray(asset) && asset.length > 0) {
+                            // Assuming that each texture is the same size, just layout once
+                            tex = asset[0].texture;
+                            if (asset.length > 1)
+                                this._pi = pi;
+                        }
+                        this._tex = tex;
+                        tex && this.onloaded();
+                    }
+                }
+                else {
+                    // Dynamic loading asset
+                    src.call(this, url);
+                }
+            }
+        }
+    });
+})(fgui);
+
 (function (fgui) {
     class Image extends Laya.Sprite {
         constructor() {
@@ -17648,7 +17756,7 @@
             if (pos1 < this._text.length)
                 result += this._text.substr(pos1);
             this._text = null;
-            return result;
+            return result.replace(/\n/g, '<br>');
         }
     }
     UBBParser.inst = new UBBParser();
diff --git a/source/src/fairygui/AssetProxy.ts b/source/src/fairygui/AssetProxy.ts
index 76aab8cf..143c2291 100644
--- a/source/src/fairygui/AssetProxy.ts
+++ b/source/src/fairygui/AssetProxy.ts
@@ -1,7 +1,7 @@
 namespace fgui {
     export class AssetProxy {
 
-        private _asset: any;
+        private _asset: Laya.LoaderManager;
 
         constructor() {
             this._asset = Laya.loader;
diff --git a/source/src/fairygui/display/HTMLImageElement.ts b/source/src/fairygui/display/HTMLImageElement.ts
new file mode 100644
index 00000000..1b065082
--- /dev/null
+++ b/source/src/fairygui/display/HTMLImageElement.ts
@@ -0,0 +1,102 @@
+namespace fgui {
+    import Texture = Laya.Texture;
+    import HTMLImageElement = Laya.HTMLImageElement;
+    const proto: HTMLImageElement = HTMLImageElement.prototype;
+    const reset: Function = proto.reset;
+    const src: Function = Object.getOwnPropertyDescriptor(proto, 'src').set;
+
+    Object.defineProperties(proto, {
+        // @Overwrite
+        reset: {
+            // Call in constructor and destroy
+            value(): HTMLImageElement {
+                return reset.call(this._stop()._resetAni());
+            }
+        },
+        _resetAni: {
+            value(): HTMLImageElement {
+                this._tex = null;
+                this._frame = 0;
+                this._reverse = false;
+                this._pi = null;
+                return this;
+            }
+        },
+        _stop: {
+            value(): HTMLImageElement {
+                Laya.timer.clear(this, this._drawImage);
+                return this;
+            }
+        },
+        _drawImage: {
+            value(graphic: Laya.Graphics, gX: number, gY: number): void {
+                let tex = this._tex;
+                if (!tex || !tex.getIsReady()) return;
+                if (!this.parent || this.parent._children.length === 0) {
+                    // TODO I think there have a bug in laya, So I wrote this code
+                    // Detail: https://github.com/porky-prince/LayaAir/commit/dd565d30b8d43f453bb784d0c63d978fca8375de
+                    this._stop();
+                    return;
+                }
+                const width: number = this.width || tex.width;
+                const height: number = this.height || tex.height;
+                const pi: PackageItem = this._pi;
+                if (pi) {
+                    const frames = pi.load() as Frame[];
+                    const curFrame: Frame = frames[this._frame];
+                    let delay: number = pi.interval + curFrame.addDelay;
+                    const border: number = !this._reverse ? frames.length - 1 : 0;
+                    const i: number = !this._reverse ? 1 : -1;
+                    if (this._frame === border) {
+                        if (pi.swing) {
+                            this._reverse = !this._reverse;
+                            this._frame -= i;
+                        } else {
+                            this._frame = 0;
+                        }
+                        delay += pi.repeatDelay;
+                    } else {
+                        this._frame += i;
+                    }
+
+                    this._tex = frames[this._frame].texture;// Next frame
+                    Laya.timer.once(delay, this, this._drawImage, [graphic, gX, gY]);
+                }
+                graphic.drawImage(tex, gX, gY, width, height);
+            }
+        },
+        // @Overwrite
+        renderSelfToGraphic: {
+            value(graphic: Laya.Graphics, gX: number, gY: number): void {
+                this._stop()._drawImage(graphic, gX, gY);
+            }
+        },
+        // @Overwrite
+        src: {
+            set(url: string) {
+                if (ToolSet.startsWith(url, "ui://")) {
+                    if (this._url === url) return;
+                    this._stop()._resetAni();
+                    const pi: PackageItem = UIPackage.getItemByURL(url);
+                    let tex: Texture = null;
+                    // Asset must be preloaded
+                    if (pi) {
+                        const asset: Object = pi.load();
+                        if (asset instanceof Texture) {
+                            tex = asset;
+                        } else if (pi.type === PackageItemType.MovieClip && Array.isArray(asset) && asset.length > 0) {
+                            // Assuming that each texture is the same size, just layout once
+                            tex = asset[0].texture;
+                            if (asset.length > 1) this._pi = pi;
+                        }
+                        this._tex = tex;
+                        tex && this.onloaded();
+                    }
+                } else {
+                    // Dynamic loading asset
+                    src.call(this, url);
+                }
+            }
+        }
+    });
+}
diff --git a/source/src/fairygui/utils/UBBParser.ts b/source/src/fairygui/utils/UBBParser.ts
index ebae9d7c..36b95ca8 100644
--- a/source/src/fairygui/utils/UBBParser.ts
+++ b/source/src/fairygui/utils/UBBParser.ts
@@ -175,7 +175,7 @@ namespace fgui {
 
             this._text = null;
 
-            return result;
+            return result.replace(/\n/g, '<br>');
         }
     }
 }
\ No newline at end of file