uniapp 中，image组件，mode 有哪几种，各有什么意思，要求 示例代码

uniapp 中，image 组件的 mode 属性有以下几种：

1. scaleToFill：缩放模式，将图片缩放到填满整个容器，可能会导致图片变形。
2. aspectFit: 缩放模式，将图片等比缩放到容器内部，保持图片的宽高比，可能会出现留白。
3. aspectFill: 缩放模式，将图片等比缩放到容器内部，保持图片的宽高比，可能会裁剪图片。
4. widthFix: 缩放模式，将图片的宽度缩放到容器的宽度，高度等比缩放，可能会导致图片变形。
5. heightFix: 缩放模式，将图片的高度缩放到容器的高度，宽度等比缩放，可能会导致图片变形。
6. top: 裁剪模式，将图片以顶部对齐方式裁剪，保留图片中间部分。
7. bottom: 裁剪模式，将图片以底部对齐方式裁剪，保留图片中间部分。
8. center: 裁剪模式，将图片以中心对齐方式裁剪，保留图片中间部分。
9. left: 裁剪模式，将图片以左对齐方式裁剪，保留图片中间部分。
10. right: 裁剪模式，将图片以右对齐方式裁剪，保留图片中间部分。
11. top left: 裁剪模式，将图片以左上角对齐方式裁剪，保留图片中间部分。
12. top right: 裁剪模式，将图片以右上角对齐方式裁剪，保留图片中间部分。
13. bottom left: 裁剪模式，将图片以左下角对齐方式裁剪，保留图片中间部分。
14. bottom right: 裁剪模式，将图片以右下角对齐方式裁剪，保留图片中间部分。

示例代码：

<template>
  <view class="container">
    <image mode="scaleToFill" src="/static/logo.png"></image>
    <image mode="aspectFit" src="/static/logo.png"></image>
    <image mode="aspectFill" src="/static/logo.png"></image>
    <image mode="widthFix" src="/static/logo.png"></image>
    <image mode="heightFix" src="/static/logo.png"></image>
    <image mode="top" src="/static/logo.png"></image>
    <image mode="bottom" src="/static/logo.png"></image>
    <image mode="center" src="/static/logo.png"></image>
    <image mode="left" src="/static/logo.png"></image>
    <image mode="right" src="/static/logo.png"></image>
    <image mode="top left" src="/static/logo.png"></image>
    <image mode="top right" src="/static/logo.png"></image>
    <image mode="bottom left" src="/static/logo.png"></image>
    <image mode="bottom right" src="/static/logo.png"></image>
  </view>
</template>

<style>
  .container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-top: 20px;
  }
  image {
    width: 200px;
    height: 200px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
  }
</style>