当前位置：网站首页>微信小程序-image加载图片工具中显示，真机中不显示

微信小程序-image加载图片工具中显示，真机中不显示

2022-06-21 15:51:00 【华为云】

支持:点赞关注️收藏

在微信小程序中，加载图片时，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>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;}