weex加载图片方式有三种，1.src直接引用base64编码，2.加载网络图片，3.加载本地图片（三端分别放在项目目录）。前两种都是比较简单直接，第三种相对初学者会比较头疼，尤其对于只掌握一端开发的人员来说，验证其他端就是比较难的事情。今天终于完成了三端本地图片的加载，特此分享和记录。

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可放至项目中任何目录
export const getImg=function(img_name) {// 获取图片在三端上不同的路径
    let platform = weex.config.env.platform
    let img_path = ''
    if (platform == 'Web') {
        img_path = `src/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 = `local:///${img_name}` // img_path = `../images/${img_name}`
    }
    return img_path
}

//导出接口
export default{ 
	getImg:getImg,
}

在需要导入的页面中使用：

import { getImg } from '@/lib/fuc.js';
export default {
	data:{
		rightIcon:getImg('icon_nav.png'),
		show: false,
	},
	created: function(){
  	
	}, 
};
</script>

三端图片放置

android端放在hdpi中即可 

ios端可放在项目目录均可，一般放在打包后的js文件同级目录 

web端放在打包后的html文件和js文件同级目录

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/1830