weex-32-如何加载本地图片

2024-06-11 01:18
文章标签 加载 图片 本地 32 weex

本文主要是介绍weex-32-如何加载本地图片,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

1594482-77f77c54a97394cf.png
A3D5CC6C-7F27-48F0-B7C4-C8084B4DED4D.png

截止我写这篇文章时(2017-5-21),组件<image> 的src 属性不支持本地图片

本节任务

加载本地图片

加载本地图片相当重要,比如我们的引导页,第一次打开应用时,展现给用户,如果是要先进行网络请求,然后呈现给用户会出现白屏,用户体验很差,所以第一次的启动应用的引导页图片肯定是要加载本地图片的,类似这个的需求,都可以使用本节的知识来做。

以iOS 为例

先安装第三方图片加载框架,如果你的框架比它高效,可以使用其它的

pod 'SDWebImage’,'~>3.8'

第一步 先把图片放在iOS项目里

1594482-8c001fab1b003e10.png
501E3ED5-1808-4FF4-BA02-2447083C0F2F.png

第二步 获取资源的根路径

let path = Bundle.main.bundlePath

如下

/var/containers/Bundle/Application/ED4E283A-12FF-4E6A-B50F-12A1FDBDCBEA/SceneKit.app

第三步 渲染js 文件时,将跟路径当做参数传递给sdkInstance对象

 sdkInstance.render(with: self.url, options: ["bundleUrl":Bundle.main.bundlePath], data: nil)

第四步 实现图片下载(这个不是本节的重点)

自定义图片下载类WXImgLoaderDefaultImpl,实现两个协议

@interface WXImgLoaderDefaultImpl : NSObject<WXImgLoaderProtocol, WXModuleProtocol>

实现部分

- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock
{
if ([url hasPrefix:@"//"]) {url = [@"http:" stringByAppendingString:url];}
return   (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager]downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {      
} completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {if (completedBlock) {completedBlock(image, error, finished);}
}];
}

在WXSDKEngine注册一下

WXSDKEngine.registerHandler(WXImgLoaderDefaultImpl(), with: WXImgLoaderProtocol.self)

以上是iOS 项目的基本配置步骤,接下来vue部分的调用

第五步 获取图片的根路径,拼接图片名称

let src =   this.$getConfig().bundleUrl + '/a1.jpg'

拼接后的路径类似下面

/var/containers/Bundle/Application/ED4E283A-12FF-4E6A-B50F-12A1FDBDCBEA/SceneKit.app

注意 sdk在渲染图片的时候,自定义类的方法

 - (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock{}

当以上面的src当做路径 创建NSURL 对象的时候,会是一个空对象,所以要拼接一个完整的url路径,正确的拼接如下

 let src =  'file://' +  this.$getConfig().bundleUrl + '/a1.jpg'

第六步 设置图片组件的属性

<image  :src="src" resize="cover"  class="image"></image>

这样本地图片就能被渲染出来了

我在app中内置了如下图片,您可以使用上面的方式创建一个demo 试试看

 ['/a1.jpg','/a2.jpeg','/a3.jpg','/a4.jpg','/a5.jpeg','/a6.png','/a7.png','/a8.jpg']

方法不只上面一种 也可以只写图片名称 在图片处理对象中进行区别处理

这篇关于weex-32-如何加载本地图片的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1049810

相关文章

使用opencv优化图片(画面变清晰)

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化,使其看起来更清晰,同时保持尺寸不变,通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多,主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器:相机传

Flutter 进阶:绘制加载动画

绘制加载动画:由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类:LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态,而 LoadingPainter 则负责绘制动画。

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中,在进行一些平板等默认横屏的设备开发的过程中,需要在进入camera2的 时候,默认预览图像也是需要横屏显示的,在上一篇已经实现了横屏预览功能,然后发现横屏预览后,拍照保存的图片 依然是竖屏的,所以说同样需要将图片也保存为横屏图标了,所以就需要看下mtk的camera2的相关横屏保存图片功能, 如何实现实现横屏保存图片功能 如图所示: 2.mtk

Spring MVC 图片上传

引入需要的包 <dependency><groupId>commons-logging</groupId><artifactId>commons-logging</artifactId><version>1.1</version></dependency><dependency><groupId>commons-io</groupId><artifactId>commons-

Prompt - 将图片的表格转换成Markdown

Prompt - 将图片的表格转换成Markdown 0. 引言1. 提示词2. 原始版本 0. 引言 最近尝试将图片中的表格转换成Markdown格式,需要不断条件和优化提示词。记录一下调整好的提示词,以后在继续优化迭代。 1. 提示词 英文版本: You are an AI assistant tasked with extracting the content of

研究人员在RSA大会上演示利用恶意JPEG图片入侵企业内网

安全研究人员Marcus Murray在正在旧金山举行的RSA大会上公布了一种利用恶意JPEG图片入侵企业网络内部Windows服务器的新方法。  攻击流程及漏洞分析 最近,安全专家兼渗透测试员Marcus Murray发现了一种利用恶意JPEG图片来攻击Windows服务器的新方法,利用该方法还可以在目标网络中进行特权提升。几天前,在旧金山举行的RSA大会上,该Marcus现场展示了攻击流程,

恶意PNG:隐藏在图片中的“恶魔”

&lt;img src=&quot;https://i-blog.csdnimg.cn/blog_migrate/bffb187dc3546c6c5c6b8aa18b34b962.jpeg&quot; title=&quot;214201hhuuhubsuyuukbfy_meitu_1_meitu_2.jpg&quot;/&gt;&lt;/strong&gt;&lt;/span&gt;&lt;

PHP抓取网站图片脚本

方法一: <?phpheader("Content-type:image/jpeg"); class download_image{function read_url($str) { $file=fopen($str,"r");$result = ''; while(!feof($file)) { $result.=fgets($file,9999); } fclose($file); re

(入门篇)JavaScript 网页设计案例浅析-简单的交互式图片轮播

网页设计已经成为了每个前端开发者的必备技能,而 JavaScript 作为前端三大基础之一,更是为网页赋予了互动性和动态效果。本篇文章将通过一个简单的 JavaScript 案例,带你了解网页设计中的一些常见技巧和技术原理。今天就说一说一个常见的图片轮播效果。相信大家在各类电商网站、个人博客或者展示页面中,都看到过这种轮播图。它的核心功能是展示多张图片,并且用户可以通过点击按钮,左右切换图片。

Weex入门教程之4,获取当前全局环境变量和配置信息(屏幕高度、宽度等)

$getConfig() 获取当前全局环境变量和配置信息。 Returns: config (object): 配置对象;bundleUrl (string): bundle 的 url;debug (boolean): 是否是调试模式;env (object): 环境对象; weexVersion (string): Weex sdk 版本;appName (string): 应用名字;