Repository: arco-design/arco-design (ts)

Issue:
When setting a small image size, the error icon is displayed incorrectly.
- [x] I'm sure this does not appear in [the issue list of the repository](https://github.com/arco-design/arco-design/issues)

## Basic Info 
- **Package Name And Version:** @arco-design/web-react: 2.24.0
- **System:** all
- **Browser:** all
- **Reproduction Link:** https://codepen.io/wildseeder/pen/JjyBavj

## What is expected?
The error icon doesn't exceed 30 x 30.

## Steps to reproduce
`<Image width={30} height={30} src='' />`


<!-- generated by arco-issue. DO NOT REMOVE -->

Pull request:
style(image): set the max size of error to fit parent
<!--
  Thanks so much for your PR and contribution.

  Before submitting, please make sure to follow the Pull Request Guidelines: https://github.com/arco-design/arco-design/blob/main/CONTRIBUTING.md
-->

<!-- Put an `x` in "[ ]" to check a box) -->

## Types of changes

<!-- What types of changes does this PR introduce -->
- [ ] New feature
- [ ] Bug fix
- [ ] Documentation change
- [ ] Coding style change
- [x] Component style change
- [ ] Refactoring
- [ ] Performance improvement
- [ ] Test cases
- [ ] Continuous integration
- [ ] Typescript definition change
- [ ] Breaking change
- [ ] Others 

## Background and context

<!-- Explain what problem does the PR solve -->
<!-- Link to related open issues if applicable -->

## Solution

<!-- Describe how the problem is fixed in detail -->

set the max size of error to fit parent.

## How is the change tested?

<!-- Unit tests should be added/updated for bug fixes and new features, if applicable -->
<!-- Please describe how you tested the change. E.g. Creating/updating unit tests or attaching a screenshot of how it works with your change -->

## Changelog

| Component | Changelog(CN) | Changelog(EN) | Related issues |
| --------- | ------------- | ------------- | -------------- |
|     Image      |    `Image` 组件将错误状态的最大尺寸设置为父元素的大小。      |  The `Image` component sets the maximum size of the error state to the size of the parent element.  |     Close #135            |

## Checklist:

- [x] Test suite passes (`npm run test`)
- [x] Provide changelog for relevant changes (e.g. bug fixes and new features) if applicable.
- [x] Changes are submitted to the appropriate branch (e.g. features should be submitted to `feature` branch and others should be submitted to `main` branch)

## Other information

<!-- Please describe what other information that should be taken care of. E.g. describe the impact if introduce a breaking change -->


Patch:
diff --git a/components/Image/image.tsx b/components/Image/image.tsx
index 95321768..0f64197d 100644
--- a/components/Image/image.tsx
+++ b/components/Image/image.tsx
@@ -138,7 +138,7 @@ function Image(baseProps: ImagePropsType, ref: LegacyRef<HTMLDivElement>) {
       <div className={`${prefixCls}-error-icon`}>
         <IconImageClose />
       </div>
-      <div className={`${prefixCls}-error-alt`}>{alt}</div>
+      {alt && <div className={`${prefixCls}-error-alt`}>{alt}</div>}
     </div>
   );
 
@@ -158,13 +158,14 @@ function Image(baseProps: ImagePropsType, ref: LegacyRef<HTMLDivElement>) {
   };
 
   return (
-    <div className={classNames} style={Object.assign({ width }, style)} ref={ref}>
+    <div className={classNames} style={Object.assign({ width, height }, style)} ref={ref}>
       <img
         ref={refImg}
         className={`${prefixCls}-img`}
         {...restProps}
         title={title}
-        style={{ height }}
+        width={width}
+        height={height}
         onLoad={onImgLoaded}
         onError={onImgLoadError}
         onClick={onImgClick}
diff --git a/components/Image/style/image.less b/components/Image/style/image.less
index 4211c7d3..83c6cffd 100644
--- a/components/Image/style/image.less
+++ b/components/Image/style/image.less
@@ -9,8 +9,6 @@
   &-img {
     vertical-align: middle;
     border-radius: inherit;
-    width: 100%;
-    height: auto;
   }
 
   &-overlay {
@@ -132,8 +130,6 @@
     height: 100%;
     background-color: @image-color-error-bg;
     color: @image-color-error-text;
-    min-height: @image-size-error-min-height;
-    padding: @image-spacing-error-padding;
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
@@ -141,14 +137,22 @@
     align-items: center;
 
     &-icon {
-      font-size: @image-font-size-error-icon;
-      line-height: @image-font-size-error-icon;
+      width: @image-font-size-error-icon;
+      height: @image-font-size-error-icon;
+      max-width: 100%;
+      max-height: 100%;
+
+      > svg {
+        width: 100%;
+        height: 100%;
+      }
     }
 
     &-alt {
       font-size: @image-font-size-error-text;
       line-height: @image-line-height-error-text;
       text-align: center;
+      padding: (@image-spacing-error-padding / 2) @image-spacing-error-padding;
     }
   }
 
@@ -158,7 +162,6 @@
     position: absolute;
     top: 0;
     left: 0;
-    min-height: @image-size-loader-min-height;
     background-color: @image-color-loader-bg;
 
     &-spin {
diff --git a/components/Select/__demo__/self-input.md b/components/Select/__demo__/custom-trigger.md
similarity index 95%
rename from components/Select/__demo__/self-input.md
rename to components/Select/__demo__/custom-trigger.md
index de6c1717..03301ec7 100644
--- a/components/Select/__demo__/self-input.md
+++ b/components/Select/__demo__/custom-trigger.md
@@ -28,7 +28,7 @@ const DemoSelect = () => {
         mode="multiple"
         onChange={(_, option) => {
           const array = option.map((item) => item.children);
-          setText(array.join('，'));
+          setText(array.join('，') || 'None');
         }}
         triggerElement={
           <Typography.Paragraph style={{ width: 345 }}>
diff --git a/components/Select/__demo__/group.md b/components/Select/__demo__/group.md
index 2998b34d..b7f61c4e 100644
--- a/components/Select/__demo__/group.md
+++ b/components/Select/__demo__/group.md
@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-使用 `dropdownRender` 对下拉菜单进行自由扩展。
+可以通过 `Select.OptGroup` 进行选项分组。
 
 ## en-US
 
-Use `dropdownRender` to freely customize the drop-down menu.
+You can use `Select.OptGroup` to group options.
 
 ```js
 import { Select } from '@arco-design/web-react';


Test patch:
diff --git a/components/Image/__test__/__snapshots__/demo.test.ts.snap b/components/Image/__test__/__snapshots__/demo.test.ts.snap
index 96148c6b..a6cf1cca 100644
--- a/components/Image/__test__/__snapshots__/demo.test.ts.snap
+++ b/components/Image/__test__/__snapshots__/demo.test.ts.snap
@@ -7,6 +7,7 @@ exports[`renders Image/demo/basic.md correctly 1`] = `
 >
   <img
     class="arco-image-img"
+    width="200"
   />
   <div
     class="arco-image-overlay"
@@ -23,6 +24,7 @@ exports[`renders Image/demo/caption.md correctly 1`] = `
     <img
       class="arco-image-img"
       title="A user’s avatar"
+      width="200"
     />
     <div
       class="arco-image-overlay"
@@ -35,6 +37,7 @@ exports[`renders Image/demo/caption.md correctly 1`] = `
     <img
       class="arco-image-img"
       title="A user’s avatar"
+      width="200"
     />
     <div
       class="arco-image-overlay"
@@ -76,6 +79,7 @@ exports[`renders Image/demo/custom-preview-actions.md correctly 1`] = `
 >
   <img
     class="arco-image-img"
+    width="200"
   />
   <div
     class="arco-image-overlay"
@@ -93,11 +97,12 @@ exports[`renders Image/demo/error.md correctly 1`] = `
   >
     <div
       class="arco-image"
-      style="width:400px"
+      style="width:400px;height:300px"
     >
       <img
         class="arco-image-img"
-        style="height:300px"
+        height="300"
+        width="400"
       />
       <div
         class="arco-image-overlay"
@@ -109,11 +114,12 @@ exports[`renders Image/demo/error.md correctly 1`] = `
   >
     <div
       class="arco-image"
-      style="width:400px"
+      style="width:400px;height:300px"
     >
       <img
         class="arco-image-img"
-        style="height:300px"
+        height="300"
+        width="400"
       />
       <div
         class="arco-image-overlay"
@@ -133,6 +139,7 @@ exports[`renders Image/demo/extra-actions.md correctly 1`] = `
       <img
         class="arco-image-img"
         title="A user’s avatar"
+        width="300"
       />
       <div
         class="arco-image-overlay"
@@ -145,6 +152,7 @@ exports[`renders Image/demo/extra-actions.md correctly 1`] = `
       <img
         class="arco-image-img"
         title="A user’s avatar"
+        width="200"
       />
       <div
         class="arco-image-overlay"
@@ -161,6 +169,7 @@ exports[`renders Image/demo/extra-actions.md correctly 1`] = `
       <img
         class="arco-image-img"
         title="A user’s avatar"
+        width="300"
       />
       <div
         class="arco-image-overlay"
@@ -173,6 +182,7 @@ exports[`renders Image/demo/extra-actions.md correctly 1`] = `
       <img
         class="arco-image-img"
         title="A user’s avatar"
+        width="200"
       />
       <div
         class="arco-image-overlay"
@@ -197,11 +207,12 @@ exports[`renders Image/demo/loader.md correctly 1`] = `
   </div>
   <div
     class="arco-image"
-    style="width:200px"
+    style="width:200px;height:200px"
   >
     <img
       class="arco-image-img"
-      style="height:200px"
+      height="200"
+      width="200"
     />
     <div
       class="arco-image-overlay"
@@ -209,11 +220,12 @@ exports[`renders Image/demo/loader.md correctly 1`] = `
   </div>
   <div
     class="arco-image"
-    style="width:200px;margin-left:67px"
+    style="width:200px;height:200px;margin-left:67px"
   >
     <img
       class="arco-image-img"
-      style="height:200px"
+      height="200"
+      width="200"
     />
     <div
       class="arco-image-overlay"
@@ -232,6 +244,7 @@ exports[`renders Image/demo/preview-get-popup-container.md correctly 1`] = `
   >
     <img
       class="arco-image-img"
+      width="200"
     />
     <div
       class="arco-image-overlay"
@@ -261,6 +274,7 @@ exports[`renders Image/demo/preview-group.md correctly 1`] = `
           >
             <img
               class="arco-image-img"
+              width="200"
             />
             <div
               class="arco-image-overlay"
@@ -277,6 +291,7 @@ exports[`renders Image/demo/preview-group.md correctly 1`] = `
           >
             <img
               class="arco-image-img"
+              width="200"
             />
             <div
               class="arco-image-overlay"
@@ -293,6 +308,7 @@ exports[`renders Image/demo/preview-group.md correctly 1`] = `
           >
             <img
               class="arco-image-img"
+              width="200"
             />
             <div
               class="arco-image-overlay"
@@ -308,6 +324,7 @@ exports[`renders Image/demo/preview-group.md correctly 1`] = `
           >
             <img
               class="arco-image-img"
+              width="200"
             />
             <div
               class="arco-image-overlay"
@@ -339,6 +356,7 @@ exports[`renders Image/demo/progressive-loader.md correctly 1`] = `
   >
     <img
       class="arco-image-img"
+      width="200"
     />
     <div
       class="arco-image-overlay"