本文講解內容為weex載入三端本地圖片，所寫解決方案均已驗證，使用sdk版本為0.18.0，其他版本不能保證可行。

  weex載入圖片方式有三種，1.src直接引用base64編碼，2.載入網路圖片，3.載入本地圖片（三端分別放在專案目錄）。前兩種都是比較簡單直接，第三種相對初學者會比較頭疼，尤其對於只掌握一端開發的人員來說，驗證其他端就是比較難的事情。藉著公司專案作為一個android開發人員寫了一些weex頁面功能，有機會和資源來除錯驗證，今天終於完成了三端本地圖片的載入，特此分享和記錄。

weex專案中引用

1. 由於單端圖片路徑不一致，所以需要寫一個方法來分別轉換路徑： 在weex專案src/mixins目錄中新建index.js檔案，加入如下轉換方法：

        // 獲取圖片在三端上不同的路徑
        // e.g. 圖片檔名是 test.jpg, 轉換得到的圖片地址為
        // - H5      : images/test.jpg        images和所在html路徑同級
        // - Android : local:///test          local代表專案各dpi目錄,一般放在hdpi裡一張即可
        // - iOS     : local///test.jpg       local代表從專案中全域性掃描 test.jpg可放至專案中任何目錄
        get_img_path: function(img_name) {
            let platform = weex.config.env.platform
            let img_path = ''

            if (platform == 'Web') {
                img_path = `images/${img_name}`
            } else if (platform == 'android') {
                // android 不需要字尾
                img_name = img_name.substr(0, img_name.lastIndexOf('.'));
                img_path = `local:///${img_name}`
            } else {
                // img_path = `../images/${img_name}`
                img_path = `local:///${img_name}`
            }

            return img_path
        },
 

2. entry.js中配置全域性引用該index.js檔案：

import mixins from '@/mixins'

// register global mixins.
Vue.mixin(mixins)

3. vue中呼叫get_img_path（‘test.png’）方法：

template中使用：
<image class = "border-image" style="width:200px;height:200px; margin-left:50px;" :src="get_img_path('test.png')"/>
script中使用：
me.get_img_path('test.png')   
 

三端圖片放置

1. android端放在hdpi中即可
2. ios端可放在專案目錄均可，一般放在打包後的js檔案同級目錄
3. web端放在打包後的html檔案和js檔案同級目錄

上文中已有詳細註釋：

        // 獲取圖片在三端上不同的路徑
        // e.g. 圖片檔名是 test.jpg, 轉換得到的圖片地址為
        // - H5      : images/test.jpg        images和所在html路徑同級
        // - Android : local:///test          local代表專案各dpi目錄,一般放在hdpi裡一張即可
        // - iOS     : local///test.jpg       local代表從專案中全域性掃描 test.jpg可放至專案中任何目錄

以上方案已在專案中應用沒有問題，希望對遇到此問題的同學有所幫助。