<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>

- 发布:2023-02-23 17:16
- 更新:2023-02-23 21:50
- 阅读:292
产品分类: 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
示例代码:
操作步骤:
<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不显示
将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打包应该显示
<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 不显示这一个图片 留白
真机/APP 不显示这一个图片 留白

FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架:https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ:543610866
网络图片,还是本地图片
名称大小写要一致
3***@qq.com (作者)
一开始是本地。我后面粘贴过网络图片过来还是不行
2023-02-25 11:06