From f802dfc306b3b5a4f5629b1761102bfaa51981c1 Mon Sep 17 00:00:00 2001
From: YamiOdymel <yamiodymel@gmail.com>
Date: Mon, 11 Jul 2022 00:34:12 +0800
Subject: [PATCH] Fixed #834, Updated image usage in ts-box example

---
 languages/en-us/components/box.yml | 8 ++++++--
 languages/zh-tw/components/box.yml | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/languages/en-us/components/box.yml b/languages/en-us/components/box.yml
index 241c53285..0c425af42 100644
--- a/languages/en-us/components/box.yml
+++ b/languages/en-us/components/box.yml
@@ -28,7 +28,9 @@ Relatives:
 Example:
     HTML: |
         <div class="[[ts-box]]">
-            <img class="{{ts-image}}" src="!-16:9-!">
+            <div class="{{ts-image}}">
+                <img src="!-16:9-!">
+            </div>
             <div class="{{ts-content}}">
                 <div class="{{ts-header}} is-heavy">Delicious thousand-layer cake!</div>
                 <p>You will receive a limited free eco bag if you order online before May.</p>
@@ -209,7 +211,9 @@ Definitions:
             Since: 4.0.0
             HTML: |
                 <div class="[[ts-box]]" style="max-width: 360px">
-                    <img class="{{ts-image}}" src="!-16:9-!">
+                    <div class="{{ts-image}}">
+                        <img src="!-16:9-!">
+                    </div>
                     <div class="{{ts-content}} is-secondary">
                         <div class="{{ts-text}} is-description">yami.io/rog-and-hololive/</div>
                         <div class="{{ts-header}} is-truncated is-heavy">ASUS calls itself a "Chinese company" and stops the cooperation with Japan companies</div>
diff --git a/languages/zh-tw/components/box.yml b/languages/zh-tw/components/box.yml
index e0245610b..bef549a4f 100644
--- a/languages/zh-tw/components/box.yml
+++ b/languages/zh-tw/components/box.yml
@@ -28,7 +28,9 @@ Relatives:
 Example:
     HTML: |
         <div class="[[ts-box]]">
-            <img class="{{ts-image}}" src="!-16:9-!">
+            <div class="{{ts-image}}">
+                <img src="!-16:9-!">
+            </div>
             <div class="{{ts-content}}">
                 <div class="{{ts-header}} is-heavy">好吃的千層蛋糕！</div>
                 <p>在 5 月之前於線上網路門市訂購，現在還特別加贈限量環保袋。</p>
@@ -209,7 +211,9 @@ Definitions:
             Since: 4.0.0
             HTML: |
                 <div class="[[ts-box]]" style="max-width: 360px">
-                    <img class="{{ts-image}}" src="!-16:9-!">
+                    <div class="{{ts-image}}">
+                        <img src="!-16:9-!">
+                    </div>
                     <div class="{{ts-content}} is-secondary">
                         <div class="{{ts-text}} is-description">yami.io/rog-and-hololive/</div>
                         <div class="{{ts-header}} is-truncated is-heavy">華碩自稱「中國公司」，中國分部發言誓死阻撓日本工商</div>