Wechat applet -image is displayed in the image loading tool, but not in the real machine

Home page ： Uncle Wang's blog

Support : Like and focus on ️ Collection

---

In the wechat applet , When loading images ,image Pictures are not displayed in the real machine

solve ： Put the picture in English name , No body naming , Can solve .

Code ：

.wxml 

<!--  Function list at the bottom of the page  --><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> Clock in </text>  </view>  <view class="contain_font2">    <text> Attendance statistics </text>  </view>  <view class="contain_font3">    <text> Attendance leave </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> Map </text>  </view>  <view class="contain_font5">    <text> motion </text>  </view>  <view class="contain_font6">    <text> scan </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> Clock in </text> </view> <view class="contain_font2"> <text> Attendance statistics </text> </view> <view class="contain_font3"> <text> Attendance leave </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> Map </text> </view> <view class="contain_font5"> <text> motion </text> </view> <view class="contain_font6"> <text> scan </text> </view> </view>

.wxss

/*  Bottom function list */.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;}

effect ：

Tools show ：

Real machine display ： The picture is compressed , Adjustment high / Pixel wide

​

---

Reprint statement ： This article is an original blog article , No reprint without the permission of the blogger .

️ Be careful  ~

This issue is over , If The content is wrong , Please The comment area indicates ！

if there be doubt Can be in Comment area or Direct messages , Try my best ‍*️ Help you solve ！

If my article has help To you , welcome give the thumbs-up + Focus on ️ encourage Blogger , Your encouragement is my motivation to share ~