3***@qq.com
3***@qq.com
  • 发布:2023-02-23 17:16
  • 更新:2023-02-23 21:50
  • 阅读:292

【报Bug】真机/APP 图片不显示

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 3.6.18

手机系统: Android

手机系统版本号: Android 10

手机厂商: 小米

手机机型: MI 8

页面类型: vue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

App下载地址或H5⽹址: https://ide.dcloud.net.cn/build/download/6d711b60-b357-11ed-a4a5-1795693b4242

示例代码:
<template>  
  <view class="login-container" :class="nowTheme">  
    <status-bar></status-bar>  
    <view class="hd" :style="{ backgroundImage: `url(${headImg2})` }"> </view>  
    <view class="card animate__animated animate__fadeIn">  
      <view class="my-cell f-jsb mt20rpx">  
            <view class="cell-left">  
                <u--image  
                     :src="headImg2"  
                     width="100rpx"  
                     height="100rpx"  
                     duration="450"  
                     shape="circle"   
                ></u--image>  
            </view>  
            <view class="cell-center ml20rpx">  
                <view class="wp-item-name">{{info.content}}</view>  
                <view class="wp-item-desc">{{info.user.user_nick}}</view>  
            </view>  
      </view>  
      <view class="f-wrap mt40rpx" v-if="info.imgs.length>0">  
        <view v-for="item in info.imgs.split(',')" :key="item" class="imgs_item" style="width:40%;">  
                <u--image  
                    :src="getImg(item)"  
                    width="100%"  
                    height="300rpx"  
                    mode="heightFix"  
                    radius="20rpx"  
                    @click="downImg(item)"  
                ></u--image>  

                <!-- <view class="f-jsb ">  
                      <view>{{item.user.user_nick}}</view>  
                      <view class="btns-left">{{dayjs(item.create_time).format('MM/DD')}}</view>  
                </view> -->  
        </view>  
        <save-img :imgurl="imgUrl" ref="saveImg"></save-img>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
import minix from '@/assets/js/minix.js'  
import {getPostInfo} from '@/api/api.js'  
import headImg2 from '@/assets/images/home/headimg2.png'  
export default {  
  mixins: [minix],  
  data() {  
    return {  
      headImg2,  
      form: {  
        username: "",  
        password: "",  
      },  
      hp_id: '',  
      info: {},  
      imgUrl: ''  
    };  
  },  
  onLoad({hp_id}){  
      this.hp_id = hp_id  
      this.getData()  
  },  
  methods: {  
    getData(){  
        getPostInfo({hp_id: this.hp_id}).then(res=>{  
            this.info = res.info  

        })  
    },  
    downImg(item){  
        console.log('下载图片');  
        this.imgUrl = this.getImg(item)  
        this.$refs.saveImg.show();  
    }  
  },  
};  
</script>  

<style lang="scss" scoped>  
.login-container {  
  background-color: var(--bg-color-grey);  
  color: var(--text-color);  
  height: 100vh;  
  box-sizing: border-box;  
  display: flex;  
  flex-direction: column;  
  overflow: hidden;  
  justify-content: space-between;  
  position: relative;  
  .hd {  
    height: 300rpx;  
    width: 100%;  
    position: absolute;  
    top: 0;  
    left: 0;  
    background-position: center;  
    background-size: cover;  
    filter: blur(30px);  
  }  
  .icon-back {  
    z-index: 1000;  
    color: #fff;  
    font-size: 32rpx;  
    margin-top: 30rpx;  
    margin-left: 30rpx;  
  }  

  .title {  
    color: #000;  
    font-size: 40rpx;  
    line-height: 60rpx;  
  }  

  .hello {  
    font-size: 24rpx;  
    color: $uni-text-color-grey;  
    line-height: 40rpx;  
  }  

  .card {  
    position: relative;  
    background-color: #fff;  
    border-radius: 60rpx 60rpx 0 0;  
    flex: 5;  
    position: relative;  
    padding: 0 40rpx;  
    margin-top: 100rpx;  
    .btns {  
      position: absolute;  
      bottom: 60rpx;  
      left: 0;  
      width: 100%;  
    }  
    .my-cell{  
        padding: 30rpx;  
        box-sizing: border-box;  
        font-size: 24rpx;  
        border-radius: 30rpx;  
        color: (--text-color);  
        width: 100%;  
        height: 140rpx;  
        z-index: 1;  
        .cell-left{  
            height: 100rpx;  
            width: 100rpx;  
            font-size: 60rpx;  
            border-radius: 20rpx;  
        }  
        .cell-center{  
            flex: 1;  
            .wp-item-name{  
                font-size: 30rpx;  
                line-height: 60rpx;  
            }  
            .wp-item-desc{  
                color: var(--text-color-grey);  
                font-size: 24rpx;  
                line-height: 40rpx;  
            }  
        }  
        .cell-right{  
            font-size: 60rpx;  
        }  
    }  

  }  
}  
.h300rpx {  
  height: 200rpx;  
}  
.mspan {  
  margin: 0 30rpx;  
}  
.my-btns{  
    margin-left: 100rpx;  
    margin-right: 100rpx;  
    font-size: 28rpx;  
    .num{  
        font-size: 32rpx;  
        font-weight: bold;  
        margin-right: 10rpx;  
    }  
}  
.custom-btn{  
    background-color: var(--bg-color-back);  
    color: var(--text-color-home);  
    padding: 20rpx 30rpx;  
    margin: 20rpx auto;  
    display: flex;  
    align-items: center;  
    justify-content: center;  
    font-size: 30rpx;  
    border-radius: 30rpx;  
    width: 160rpx;  
}  

</style>  

操作步骤:
            <view class="cell-left">  
                <u--image  
                     :src="headImg2"  
                     width="100rpx"  
                     height="100rpx"  
                     duration="450"  
                     shape="circle"   
                ></u--image>  
            </view>  
            <view class="cell-center ml20rpx">  
                <view class="wp-item-name">{{info.content}}</view>  
                <view class="wp-item-desc">{{info.user.user_nick}}</view>  
            </view>  
      </view>

这一块代码 头像 真机/app不显示
将u--image 换成原始的img 标签 也不显示

预期结果:
            <view class="cell-left">  
                <u--image  
                     :src="headImg2"  
                     width="100rpx"  
                     height="100rpx"  
                     duration="450"  
                     shape="circle"   
                ></u--image>  
            </view>  
            <view class="cell-center ml20rpx">  
                <view class="wp-item-name">{{info.content}}</view>  
                <view class="wp-item-desc">{{info.user.user_nick}}</view>  
            </view>  
      </view>

这一块代码APP打包应该显示

实际结果:

真机/APP 不显示这一个图片 留白

bug描述:

图片在H5能显示,但是在手机上显示不出来, 重复测试了很多次 打了很多次包和真机测试 都是这样的 就cell-left的头像怎么都显示不出来 包括显示在线的图片

2023-02-23 17:16 负责人:无 分享
已邀请:
FullStack

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866

网络图片,还是本地图片

名称大小写要一致

  • 3***@qq.com (作者)

    一开始是本地。我后面粘贴过网络图片过来还是不行

    2023-02-25 11:06

该问题目前已经被锁定, 无法添加新回复