微信小程序----相对路径图片不显示

微信小程序----相对路径图片不显示

出现场景

在本地调试的时候本地图片显示,但是手机浏览的时候本地图片不显示。

出现图片不显示的原因

小程序只支持网络路径和base64的图片。图片转base64在线工具

处理方法

1. 将图片都放到服务器，然后直接采用网络路径。
   1.1 优点是能够放大量的图片。
   1.2 缺点是有时开发中有大量的小图片，或者修改小图标，对于开发者来说，更换会很麻烦。

2. 将图片都转换成 base64 的图片保存，使用时直接引入。图片转base64在线工具
   2.1 优点是方便快捷，开发过程中容易更换。
   2.2 缺点是由于微信小程序规定了每个文件不能超过500MB，超过另行打包。所以如果图片过大，或者量过大，都不方便。

优化处理

将网络路径图片和 base64 的图片结合使用。图片转base64在线工具

1. 开发大图片（轮播等）或图片量大（商品图片等）的场景时，采用网络路径。

   优点是产品发布后方便图片的上下架，不用再提交审核，使用静态图片的尴尬和麻烦。

2. 开发logo、导航等小图片时，采用 base64 的图片。图片转base64在线工具

   优点是开发时方便开发者更换，引入方便；转换快捷，用图片转base64在线工具可直接转换；不用开发时总是往服务器上传图片。

实践开发

开发效果图

首页的轮播和网吧列表都是采用的网络路径，订单页面的右箭头和更多商品图标都是采用的 base64 图片。

开发代码

1. 首页轮播和店铺列表JS

const app = getApp();
const urlList = require('../../utils/config.js');
Page({
  data: {
    supplierList: [],
    iconList: iconList,
    bannerInfo: null,
    indicatorDots: true,//是否显示面板指示点
    autoplay: true,//是否开启自动切换
    interval: 3000,//自动切换时间间隔
    duration: 500,//滑动动画时长
    bannerList: [],
    shopList: [],
    currentPage: 1,
    pageSize: 10,
    total: 1000,
    myList: []
  },
  onLoad(){
    // 获取分享信息
    this.getShare();
  },
  onShow(){
    // 获取轮播列表
    this.getBannerList();

    // 获取当前地址
    wx.getLocation({
      success: res => {
        if (res.errMsg == 'getLocation:ok') {
          this.getShopList(res);
        }
      },
      fail: res => {
        this.wetoast.toast({ title: '获取定位失败，请打开定位，重新进入！' });
      }
    })
  },
  // 获取店铺列表
  getShopList(obj){
    // 判断是否还有更多数据
    if (!app.loadMoreData(this)) { return }
    // 请求数据
    let account = wx.getStorageSync('accountInfo');
    let location = obj;
    wx.request({
      url: urlList.shopListUrl,
      data: {
        // accountID: account.accountID,
        // passWord: account.passWord,
        longitude: location.longitude,
        latitude: location.latitude,
        currentPage: this.data.currentPage,
        pageSize: this.data.pageSize,
        sType: '1',
        token: app.globalData.token
      },
      success: res => {
        if(res.data.state == 'true'){
          console.log(res)
          this.setData({
            shopList: this.data.shopList.concat(res.data.data.supplierList),
            currentPage: ++this.data.currentPage,
            total: res.data.data.total,
            __noMoreData__: app.loadSuccessData(this, res.data.data.supplierList)
          })
        }else{
          console.log('网吧列表：' + res.data.exception)
          this.wetoast.toast({ title: '网吧列表加载失败！' });
        }
      }
    })
  },
  // 获取轮播列表
  getBannerList(){
    wx.request({
      url: urlList.advertPicListUrl,
      data: { appID: '4'},
      success: res => {
        if (res.data.state == 'true') {
          // console.log(res.data.data.picList)
          this.setData({
            bannerList: res.data.data.picList
          })
        }else{
          console.log('轮播列表：' + res.data.exception)
          this.wetoast.toast({ title: '轮播列表加载失败！' });
        }
      }
    })
  },
  //滚动加载
  onReachBottom(){
    this.getShopList(app.globalData.location);
  }
})

1. 首页轮播和店铺列表WXML

<scroll-view  scroll-y="true">
  <swiper class="rui-swiper" style='height:{
      {
      bannerInfo.height}}px' current="0" indicator-dots="{
      {