山葵蛋卷
山葵蛋卷
  • 发布:2024-10-08 11:01
  • 更新:2024-10-10 15:45
  • 阅读:110

【报Bug】在data中定义的数组变量里,插入10个以上数据,包含图片url,v-for渲染会有多个image显示undefined。必现。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win11

HBuilderX类型: 正式

HBuilderX版本号: 4.28

手机系统: Android

手机系统版本号: Android 14

手机厂商: 模拟器

手机机型: mumu

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:
<template>  
      <scroll-view class="chat_scroll_view" :scroll-y="ableScroll" :scroll-with-animation="true" @scrolltolower="queryMsgList">  
          <view >  
               <view class="msg_item_line" v-for="(item,index) in msgList" :key="item.id">  
                <view class="msg_user_avatar" >  
                    <image :src="item.photo" width="100%" :key="item.id" :keys="item.id" />  
                </view>  
                <view class="msg_text"  v-html="item.message"></view>  
            </view>  
        </view>  
    </scroll-view>  
</template>  
<script>  
        export default {  
        data() {  
                        msgList:[  
{  
    "id": "1728353615067zdxsqyfw",  
    "fromid": "5F5F62C5A4564FEF839F3B91EB7F0932",  
    "toid": "607BCC56691C48E18E14F95FCA7B0766",  
    "msgtype": 1,  
    "message": "123",  
    "status": 1,  
    "createtime": 1728353615537,  
    "name": "杨",  
    "photo": "http://119.60.25.62:19000/user-photo/20240903/1724917237-compressed-IMG_1673_20240903143647A060.JPG"  
}  
                         ]  
                 },  
                 methods:{  
                        // 新消息插入  
            handleMsgPush(msgData){  
                let hasMsg = this.msgList.filter(item =>item.id == msgData.id)  
                if(hasMsg.length<1){  
                    this.msgList.unshift(msgData);  
                    this.$forceUpdate()  

                }  

            },  
                  }  
        }  
</script>

操作步骤:

循环调用handleMsgPush() 10次以上,页面部分image会显示undefined

预期结果:

期望正常显示图片,或正常显示的解决方案。已尝试其他方案,background, canvas drwa-image, uni.download后的地址,图片转base64,还是会出现undefined

实际结果:

还是会出现undefined

bug描述:

模拟聊天会话列表,包含头像、昵称、文字内容。在data中定义的array[object]类型变量,批量unshift插入10条以上数据,部分图片显示undefined,必现。
数据结构:```javascript
{
"id": "1728353615067zdxsqyfw",
"fromid": "5F5F62C5A4564FEF839F3B91EB7F0932",
"toid": "607BCC56691C48E18E14F95FCA7B0766",
"msgtype": 1,
"message": "123",
"status": 1,
"createtime": 1728353615537,
"name": "杨",
"photo": "http://119.60.25.62:19000/user-photo/20240903/1724917237-compressed-IMG_1673_20240903143647A060.JPG"
}

2024-10-08 11:01 负责人:DCloud_UNI_yuhe 分享
已邀请:
DCloud_UNI_yuhe

DCloud_UNI_yuhe

你好,我这里没有复现这个问题,看起来就算你的url为undefined,那么也不会在图片上显示undefined。

你可以检查一下后端图片是否正常,或者将相关的代码逻辑提取出来,提供一个可以复现的项目。

  • 山葵蛋卷 (作者)

    上下用的同一个图片,有的能显示,有的显示undefined

    2024-10-11 11:20

  • DCloud_UNI_yuhe

    回复 山葵蛋卷: 可以提供一个可以复现的项目吗?

    2024-10-11 11:21

旧时光

旧时光 - 我是一位6年+前端开发的技术人员

请问楼主解决了吗

要回复问题请先登录注册