项目目录结构

├── src
│   ├── app.wpy
│   ├── assets
│   │   └── images                   # 项目图片目录
│   │       ├── eye.png
│   │       ├── home
│   │       │   └── banner-1.jpg
│   │       ├── time.png
│   │       └── weather
│   │           └──0.png
│   ├── components
│   │   ├── home
│   │   │   ├── HomeBanner.wpy
│   │   │   └── HomeFooter.wpy
│   ├── core
│   │   ├── filters
│   │   │   └── MPImageFilter.wxs    # 处理template模板中的图片路径
│   │   └── utils
│   │       └── MPImageUtil.js       # 处理javascript代码中的图片路径
│   ├── pages
│   │   └── home.wpy
├── upload-image.js
└── package.json

图片上传七牛云服务器

# 安装七牛云js库
$ npm install qiniu --save-dev

# 执行上传本地图片至七牛云（请先修改upload-image.js中配置参数）
$ node upload-image.js

代码调整

从代码的角度来看，小程序中图片的使用分为2种场景：

场景1

在javascript代码中定义的图片路径变量，如：

export default class HomeBanner extends  {
    data = {
        imgUrls: [
            '../assets/images/home/banner-1.jpg',
        ]
    }
}

解决方案

import MPImageUtil from '../../core/utils/MPImageUtil';
export default class HomeBanner extends  {
    data = {
        imgUrls: [
            MPImageUtil.getImagePath('../assets/images/home/banner-1.jpg'),
        ]
    }
}

场景2

在wxml中使用图片

<template>
    <image src="../assets/images/home/banner-1.jpg" mode="aspectFill"/>
</template>

解决方案

<template>
    <image src="{{ MPImageFilter.get('../assets/images/home/banner-1.jpg') }}" mode="aspectFill"/>
</template>

<script>
    import wepy from 'wepy';
    import MPImageFilter from '../../core/filters/MPImageFilter.wxs';

    export default class HomeFooter extends 
    {
        wxs = {
            MPImageFilter: MPImageFilter
        }
    }
</script>