版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/cui130/article/details/84026843
本文讲解内容为weex加载三端本地图片，所写解决方案均已验证，使用sdk版本为0.18.0，其他版本不能保证可行。
weex加载图片方式有三种，1.src直接引用base64编码，2.加载网络图片，3.加载本地图片（三端分别放在项目目录）。前两种都是比较简单直接，第三种相对初学者会比较头疼，尤其对于只掌握一端开发的人员来说，验证其他端就是比较难的事情。借着公司项目作为一个android开发人员写了一些weex页面功能，有机会和资源来调试验证，今天终于完成了三端本地图片的加载，特此分享和记录。
weex项目中引用
- 由于三端图片路径不一致，所以需要写一个方法来分别转换路径：
在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
},
- entry.js中配置全局引用该index.js文件：
import mixins from '@/mixins'
// register global mixins.
Vue.mixin(mixins)
- 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')
三端图片放置
- android端放在hdpi中即可
- ios端可放在项目目录均可，一般放在打包后的js文件同级目录
- 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可放至项目中任何目录
以上方案已在项目中应用没有问题，希望对遇到此问题的同学有所帮助。