在微信小程序中,加载图片时,image真机中不显示图片
解决:将图片用英文命名,不用正文命名,即可解决。
代码:
/* **.wxml */
<!-- 页面下端功能列表 --> <view class="container"> <view class="contain_panel1"> <view class="contain_img1"> <image src="../images/functionlists/kaoqin.png" /> </view> </view> <view class="contain_panel2"> <view class="contain_img2"> <image src="../images/functionlists/kaoqin_tongji.png" /> </view> </view> <view class="contain_panel3"> <view class="contain_img3"> <image src="../images/functionlists/kaoqin_qingjia.png" /> </view> </view> </view> <view class="container2"> <view class="contain_font1"> <text>考勤打卡</text> </view> <view class="contain_font2"> <text>考勤统计</text> </view> <view class="contain_font3"> <text>考勤请假</text> </view> </view> <view class="container3"> <view class="contain_panel4"> <view class="contain_img4"> <image src="../images/functionlists/map.png" class="contain-image" /> </view> </view> <view class="contain_panel5"> <view class="contain_img5"> <image src="../images/functionlists/sports.png" /> </view> </view> <view class="contain_panel6"> <view class="contain_img6"> <image src="../images/functionlists/scan.png" /> </view> </view> </view> <view class="container4"> <view class="contain_font4"> <text>地图</text> </view> <view class="contain_font5"> <text>运动</text> </view> <view class="contain_font6"> <text>扫一扫</text> </view> </view>/* **.wxss */
/* 底端功能列表*/ .container { display: flex; padding: 20rpx; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin-left: 42rpx; } .container2 { display: flex; padding: 20rpx; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin-left: 42rpx; margin-top: -40rpx; } .container3 { display: flex; padding: 20rpx; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin-left: 42rpx; margin-top: 130rpx; } .container4 { display: flex; padding: 20rpx; flex-flow: row wrap; justify-content: flex-start; align-items: center; margin-left: 42rpx; margin-top: -40rpx; } .container contain_panel1 { width: 100rpx; height: 100rpx; display: flex; flex-direction: row; } .container contain_panel2 { width: 100rpx; height: 100rpx; display: flex; flex-direction: row; } .container contain_panel3 { width: 100rpx; height: 100rpx; display: flex; flex-direction: row; } .container contain_panel4 { width: 100rpx; height: 100rpx; display: flex; flex-direction: row; } .container contain_panel5 { width: 100rpx; height: 100rpx; display: flex; flex-direction: row; } .container contain_panel6 { width: 100rpx; height: 100rpx; display: flex; flex-direction: row; } .contain_img1 image { opacity: 1; background-color: transparent; border-color: rgb(34, 34, 34); border-style: none; height: 50px; width: 50px; margin-top: 0; position: absolute; left: 90rpx; } .contain_font1 text { border-style: none; border-width: 2px; color: rgb(102, 102, 102); font-size: 14px; height: 22px; line-height: 22px; margin-top: 100rpx; margin-left: 23rpx; position: absolute; } .contain_img2 image { opacity: 1; background-color: transparent; border-color: rgb(34, 34, 34); border-style: none; height: 50px; width: 50px; margin-top: 0; position: absolute; left: 300rpx; } .contain_font2 text { border-style: none; border-width: 2px; color: rgb(102, 102, 102); font-size: 14px; height: 22px; line-height: 22px; margin-top: 100rpx; margin-left: 230rpx; position: absolute; } .contain_img3 image { opacity: 1; background-color: transparent; border-color: rgb(34, 34, 34); border-style: none; height: 50px; width: 50px; margin-top: 0; position: absolute; left: 530rpx; } .contain_font3 text { border-style: none; border-width: 2px; color: rgb(102, 102, 102); font-size: 14px; height: 22px; line-height: 22px; margin-top: 100rpx; margin-left: 455rpx; position: absolute; } .contain_img4 image { opacity: 1; background-color: transparent; border-color: rgb(34, 34, 34); border-style: none; height: 50px; width: 50px; margin-top: 0; position: absolute; left: 90rpx; } .contain_font4 text { border-style: none; border-width: 2px; color: rgb(102, 102, 102); font-size: 14px; height: 22px; line-height: 22px; margin-top: 100rpx; margin-left: 45rpx; position: absolute; } .contain_img5 image { opacity: 1; background-color: transparent; border-color: rgb(34, 34, 34); border-style: none; height: 50px; width: 50px; margin-top: 0; position: absolute; left: 300rpx; } .contain_font5 text { border-style: none; border-width: 2px; color: rgb(102, 102, 102); font-size: 14px; height: 22px; line-height: 22px; margin-top: 100rpx; margin-left: 255rpx; position: absolute; } .contain_img6 image { opacity: 1; background-color: transparent; border-color: rgb(34, 34, 34); border-style: none; height: 50px; width: 50px; margin-top: 0; position: absolute; left: 530rpx; } .contain_font6 text { border-style: none; border-width: 2px; color: rgb(102, 102, 102); font-size: 14px; height: 22px; line-height: 22px; margin-top: 100rpx; margin-left: 475rpx; position: absolute; } .contain-image { position: absolute; height: 50px; width: 50px; }
效果:
工具显示:
真机显示:图片经过压缩,调节高/宽像素
----------------------------------------------------------------------------------------------------------------
转载
声明:本文为博主原创文章,未经博主允许不得转载。
----------------------------------------------------------------------------------------------------------------
文章中,有问题,可以在评论区评论,一起探讨编程中奥秘!
----------------------------------------------------------------------------------------------------------------
来都来了,那就点个赞吧