更新：对于含有图片的消息数据，新增了图片的宽高值，使图片加载前可以固定容器高度，从而避免列表抖动。

components/uni-im-img/uni-im-img.vue

 <template>
-  <image @load="load" :src="url" :mode="mode" :style="{width,height}" @click="handleClick"></image>
+  <image @load="load" :src="url" :mode="mode" :style='{"width":viewWidth,"height":viewHeight}' @click="handleClick"></image>
 </template>
 
 <script>
@@ -16,15 +16,50 @@ import uniIm from '@/uni_modules/uni-im/sdk/index.js';
         default: ''
       },
       maxWidth: {
-        type: [String,Boolean],
+        type: [String,Number],
         default: false
       },
+      maxHeight: {
+        type: [String,Number],
+        default: ''
+      },
+      width: {
+        type: [String,Number],
+        default: ''
+      },
+      height: {
+        type: [String,Number],
+        default: ''
+      }
     },
     data() {
       return {
-        width:"1px",
-        height:"1px",
-        url: ''
+        url: '',
+        viewWidth: '',
+        viewHeight: ''
+      }
+    },
+    mounted() {
+      // console.log('beforeCreate')
+      if( this.width && this.height){
+        // 根据maxWidth 和 maxWidth，在保持宽高比例不变的情况下 计算viewWidth 和 viewHeight
+        const maxWidth = this.toPx(this.maxWidth)
+        const maxHeight = this.toPx(this.maxHeight)
+        let width = this.toPx(this.width)
+        let height = this.toPx(this.height)
+        
+        // 如果宽超过最大宽度，高度按比例缩小
+        if(width > maxWidth){
+          height = height * maxWidth / width
+          width = maxWidth
+        }
+        // 如果高超过最大高度，宽度按比例缩小
+        if(height > maxHeight){
+          width = width * maxHeight / height
+          height = maxHeight
+        }
+        this.viewWidth = width + 'px'
+        this.viewHeight = height + 'px'
       }
     },
     watch: {
@@ -37,7 +72,7 @@ import uniIm from '@/uni_modules/uni-im/sdk/index.js';
               this.url += '?imageMogr2/thumbnail/400x400>'
             }else if(src.indexOf('http') === 0){
               // 因为还可能是 base64 blob 的本地图片，所以这里判断是不是http开头的
-              this.url += '?x-oss-process=image/resize,w_100/quality,q_80'
+              this.url += '?x-oss-process=image/resize,w_200/quality,q_80'
             }
           }
         },
@@ -47,24 +82,29 @@ import uniIm from '@/uni_modules/uni-im/sdk/index.js';
     methods: {
       load(e){
         // console.log('img load',e)
-        this.width = e.detail.width
-        // 如果以rpx为单位，转换为px
-        let maxWidth = parseInt(this.maxWidth)
-        if(this.maxWidth && this.maxWidth.indexOf('rpx') > -1){
-          maxWidth = parseInt(this.maxWidth) * uniIm.systemInfo.windowWidth / 750
-        }
-        // console.log('maxWidth',maxWidth)
-        if(maxWidth && this.width > maxWidth){
-          this.width = maxWidth + 'px'
-          this.height = maxWidth * e.detail.height / e.detail.width + 'px'
-          // console.error('超了',this.width,this.height)
-        }else{
-          this.width = e.detail.width + 'px'
-          this.height = e.detail.height + 'px'
+        // TODO：渲染后再设置宽高，为兼容旧版系统，图片消息中没有带宽高的情况
+        if(!this.width || !this.height){
+          let width = e.detail.width
+          let maxWidth = this.toPx(this.maxWidth)
+          if(maxWidth && width > maxWidth){
+            this.viewWidth = maxWidth + 'px'
+            this.viewHeight = maxWidth * e.detail.height / e.detail.width + 'px'
+            // console.error('超了',this.width,this.height)
+          }else{
+            this.viewWidth = e.detail.width + 'px'
+            this.viewHeight = e.detail.height + 'px'
+          }
         }
       },
       handleClick(){
         this.$emit('click')
+      },
+      // 如果是rpx单位，转换为px
+      toPx(val){
+        if(typeof val === 'string' && val.indexOf('rpx') > -1){
+          return parseInt(val) * uniIm.systemInfo.windowWidth / 750
+        }
+        return parseInt(val)
       }
     }
   }

components/uni-im-msg/types/image.vue

 <template>
   <view>
     <!-- 注意:根节点都view不能去掉，否则鼠标右键出不来菜单 -->
-    <uni-im-img max-width="100px" :src="msg.body.url" mode="widthFix" @click="previewImage" class="img" />
+    <uni-im-img max-width="200px" :src="msg.body.url" :width="msg.body.width" :height="msg.body.height" mode="widthFix" @click="previewImage" class="img" />
   </view>
 </template>
 

components/uni-im-msg/types/rich-text.vue

@@ -14,10 +14,10 @@
         </text>
         <uni-im-icons class="text isRead" v-if="isFromSelf && 'isRead' in item" :code="item.isRead?'e609':'e741'"
           size="14px" :color="item.isRead?'#25882a':'#bbb'"></uni-im-icons>
-      </template>
-      <text class="text" v-else-if="item.type == 'text'" :decode="true" space="ensp">{{item.text}}</text>
-      <uni-im-img v-else-if="item.name == 'img'" max-width="100px" @click="previewImage(item.attrs.src)"
-        :src="item.attrs.src" mode="widthFix" class="img" />
+      </template>
+      <text class="text" v-else-if="item.type == 'text'" :decode="true" space="ensp">{{item.text}}</text>
+      <uni-im-img v-else-if="item.name == 'img'" max-width="200px" @click="previewImage(item.attrs.src)"
+        :src="item.attrs.src" :width="item.attrs.width" :height="item.attrs.height" mode="widthFix" class="img" />
       <uni-link class="link" v-else-if="item.name == 'a'" :href="item.attrs.href" color="#007fff"
         :text="item.children[0].text"></uni-link>
     </template>

pages/chat/chat.nvue

@@ -853,13 +853,12 @@
         // console.log('this.uploadFileAndSendMsg res',res);
         tempFiles.forEach(async tempFile => {
           // console.log('tempFile~',tempFile);
-          let {
+          const {
             path:url,
             name,
             size
           } = tempFile;
-          
-          let {fileType} = tempFile
+          const {fileType} = tempFile
           if (!['image', 'video'].includes(fileType)) {
             fileType = 'file'
           }
@@ -878,13 +877,18 @@
             });
           }
           
-          let data = {};
-          data[fileType] = {
+          const data = {};
+          const fileInfo = {
             url,
             size,
             name
           };
-          
+          if(fileType == 'image'){
+            const {width,height} = await uni.getImageInfo({src:url});
+            fileInfo.width = width
+            fileInfo.height = height
+          }
+          data[fileType] = fileInfo
           let msg = await this.beforeSendMsg(data,false)
           // console.log('~~~beforeSendMsg',msg);
           try{
@@ -897,7 +901,7 @@
             await this.updateMsg(msg)
             this.sendMsg(msg)
           }catch(e){
-            console.error(777,e)
+            console.error('uploadFile error:',e)
           }
           
         });
@@ -1035,13 +1039,11 @@
         }
         if (typeof this.chatInputContent == 'object'){
           // 富文本（图文混排、@某人）消息
-          
           // 把字符串中带url的链接转为html的a标签的形式。1.将字符串，按是否为标签，切割为数组
           const htmlStr = this.chatInputContent.html.split(/(<[^>]+>)/)
                   // 2.找到不以<开头的字符串内的url并替换为 html的a
                   .map(str=>str.startsWith('<') ? str : uniIm.utils.replaceUrlToLink(str))
-                  .join(' ')
-          
+                  .join('')
           // 先插到消息列表
           let msg = await this.beforeSendMsg({
             "rich-text":uniIm.utils.parseHtml(htmlStr)
@@ -1052,26 +1054,36 @@
           msg.body.forEach(async item=>{
             if(item.type === 'text'){
               item.text = item.text.trim();
-            }else if(item.name === 'img' && item.attrs.src.indexOf('data:image/png;base64,') === 0){
+            }else if(item.name === 'img'){
               promiseArr.push(new Promise((resolve,reject)=>{
-                uniCloud.uploadFile({
-                  filePath: item.attrs.src,
-                  cloudPath: Date.now() + uniCloud.getCurrentUserInfo().uid + '.' + name.split('.').pop(),
-                }).then(res=>{
-                  item.attrs.src = res.fileID
-                  // console.log('上传成功',res);
-                  resolve()
-                }).catch(e=>{
-                  console.error(777,e,item.attrs.src);
-                  reject()
-                })
+                uni.getImageInfo({
+                  src:item.attrs.src,
+                  success:res=>{
+                    item.attrs.width = res.width
+                    item.attrs.height = res.height
+                    resolve()
+                  },
+                  fail:reject
+                });
               }))
+              
+              if(item.attrs.src.indexOf('data:image/png;base64,') === 0){
+                promiseArr.push(new Promise((resolve,reject)=>{
+                  uniCloud.uploadFile({
+                    filePath: item.attrs.src,
+                    cloudPath: Date.now() + uniCloud.getCurrentUserInfo().uid + '.' + name.split('.').pop(),
+                  }).then(res=>{
+                    item.attrs.src = res.fileID
+                    // console.log('上传成功',res);
+                    resolve()
+                  }).catch(e=>{
+                    reject()
+                  })
+                }))
+              }
             }
           })
           await Promise.all(promiseArr)
-          
-          // console.log('msg',msg);
-          
           // 传完更新
           await this.updateMsg(msg)
           // 执行发送