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

出现场景

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

出现图片不显示的原因

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

处理方法

将图片都放到服务器，然后直接采用网络路径。

1.1 优点是能够放大量的图片。

1.2 缺点是有时开发中有大量的小图片，或者修改小图标，对于开发者来说，更换会很麻烦。

将图片都转换成 base64 的图片保存，使用时直接引入。图片转base64在线工具

2.1 优点是方便快捷，开发过程中容易更换。

2.2 缺点是由于微信小程序规定了每个文件不能超过500MB，超过另行打包。所以如果图片过大，或者量过大，都不方便。

优化处理

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

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

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

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