weex本地图片的加载实现方式

更新日期: 2019-01-17阅读: 6.1k标签: weex

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://www.fly63.com/article/detial/1830

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!