apicloud通过img标签,src赋值本地链接有时显示不了图片的问题。本地调试,如果config.xml文件配置<content src="http://192.168.20.117:8080/index.html" />
调试,虽然加上vue的热编译,更新刷新页面很爽。但也导致一个问题,就是img的src赋值本地链接无法显示图片。这个时候,我们只能通过把编译后的代码导入apicloud的项目,把config.xml文件配置<content src="index.html" />
,然后增量同步到客户端同步,这个时候android端是可以显示到图片的。通过上述方法,在ios端却不一定能显示成功。
我们回顾我们使用的读取图片的方法,api.getPicture和UIAlbumBrowser模块读取图片或者视频。
如果是使用api.getPicture读取到文件,或者拍照拍的图片,在android或者ios端是可以通过img赋值src直接显示的。但是弊端是,选择图片我们无法多选,于是我们引入了UIAlbumBrowser模块读取图片或者视频。
如果是使用UIAlbumBrowser模块,我们获取到的路径在android上可以通过img赋值src直接显示,但是ios端不行。我们阅读文档不难发现,其实这个模块也有这个问题。同时该模块提供了transPath、batchTransPath、transVideoPath等方法进行路径转换,让后我们可以直接通过img或video标签直接读取文件。读取该模块读取的文件路径,在ios端通过trans.decodeImgToBase64将图片转base64会失败。
综上所述,将图片转成base64字符上传后台,再解析存储成文件没必要,也很麻烦。所以使用api.getPicture读取文件,我们可以直接img或者video标签直接读取显示。如果使用UIAlbumBrowser模块,则需要再用其提供的方法(transPath、batchTransPath、transVideoPath),将路径进行转换再用img或video标签读取。
参考链接:
https://docs.apicloud.com/Client-API/UI-Layout/UIAlbumBrowser
https://docs.apicloud.com/Client-API/api#20