关于uni.appd打包H5 图片在IOS 上不显示的问题

最新推荐文章于 2024-05-17 16:25:58 发布
最新推荐文章于 2024-05-17 16:25:58 发布
阅读量1.1k 收藏
点赞数 1
文章标签： ios javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pangzi_mm/article/details/120254393
版权

最近在改前人的代码，上一任的前端用的是uni.app打包的H5页面，随后要增加一个定位的功能。。。。。，一想也没什么困难的嘛，就开始写了，结果 这才是噩梦的开始。。。
定位很快就写好了 用的是uni.app自带的api ，成功获取到用户的经纬度。。。
我就很快的开始了测试…结果悲催的事情发生了。。。我发现定位之后 所有的图片显示不出开了。。。IOS上就是不显示。，，， 安卓的没有影响。在就离谱。。。
在没有获取去定位的时候，图片是正常显示的…获取定位就不显示…这让我很是着急
然后在想是不是定位的问题。。通过各种百度 用了各种定位方法…结果还是不行。。。我就很郁闷
…
一天的心情不是很爽…结果猛地发现。。图片的路径不是https…我开始没有注意…因为没有定位之前的图片是可以显示的。。路径是http，，当时也没有太注意，，一直把重心放在了 定位上面
最后抱着试试的心态 把图片的路径替换成https 结果真的显示出来

 		这就很离谱 这是为什么类 ，一直没有想明白，，，好了 最后放一张图

在这里插入图片描述

吃不胖的_胖胖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端页面在ios中不显示图片的解决方法
08-28
下面小编就为大家带来一篇移动端页面在ios中不显示图片的解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
uniapp h5或者公众号图片 安卓显示 ios不显示的问题
weixin_45721912的博客
01-10 1312
如果你的接口前缀是https的，后台返回的图片地址前缀是http的。那么就一个解决办法。那就是把后台返回的图片地址前缀改成https，简单粗暴亲测有效！
解决uniapp打包h5后，图片显示不出来的问题
最新发布
weixin_44431073的博客
05-17 326
使用uniapp开发h5页面，发行后，在正式环境中图片加载不出来，但是本地是正常的。在需要使用路径的地方，这样写。
uni-app 开发H5，uni.previewImage方法不能预览base64的图片
漫天随飞雪的博客
09-14 4213
https://ext.dcloud.net.cn/plugin?id=123 预览前先把base64转成正常图片，转换的图片会自动保存在缓存里，预览图片的地址就是转换出来的这张图的缓存地址了，这样就可以预览了
uniapp h5项目 实现微信内分享 以及排坑ios分享获取不到缩略图和描述的bug
国企程序媛 record 前端技术 & review code。。。
06-05 2322
uniapp h5项目 实现微信内分享
ios苹果手机 uniapp长按识别二维码图片白色背景问题
qq_37962440的博客
06-01 755
ios苹果手机 uniapp 长按识别二维码图片出现白色背景
uni-app前端框架坑点集合，打包图片加载不到问题
热门推荐
silence_forever
04-08 1万+
canvas画图保存到本地才发现的当绘制网络资源图片时保存为空白图片。对于CanvasContext.drawImage这个canvas的画图函数中imageResource并未标明对图片资源的要求，就早些版本是可以加载网络图片的，但是2019.12.12日对照微信小程序文档发现对于网络资源必须downloadFile存为缓存图片。此处uni文档并未标明。 HbuilderX 2.2.2 ...
kubernetes.appd-agents
05-02
kubectl create -f appd-agents.yaml 监控应用 要监视应用程序，您必须告诉它在哪里可以找到代理以及应如何在AppDynamics中对其进行命名。 一个简单的示例如下所示： apiVersion: extensions/v1beta1 kind: ...
数据库系统概念教学课件appd.ppt
09-28
数据库系统概念教学课件appd.ppt
uni-app入坑指南
01-27
uni-app是一个使用Vue.js开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。详情点击 uni-app官方文档uni-app在跨端数量、扩展能力、性能体验、周边生态、学习成本、开发...
ad_appd2.log
05-26
ad_appd2.log
C++小游戏 AppD (VisualCPP代码作业)
06-23
C++小游戏 AppD (VisualCPP代码作业)C++小游戏 AppD (VisualCPP代码作业)C++小游戏 AppD (VisualCPP代码作业)C++小游戏 AppD (VisualCPP代码作业)C++小游戏 AppD (VisualCPP代码作业)C++小游戏 AppD (VisualCPP代码...
uniapp 打开相册，不显示图片
jackeylovestar的博客
03-10 222
在vivo应用市场上架时，上传图片-从相册选择-选择图片页面内容为空。
解决uniapp打包运行在真机上时，图片无法正常显示的问题
ven_cy的博客
12-07 8014
解决uniapp程序打包运行在真机上时，图片无法正常显示的问题
关于uniapp使用uni.scanCode扫码时IOS出现空白页面
weixin_43118617的博客
08-30 1614
关于uniapp使用uni.scanCode扫码时IOS出现空白页面 最近在使用uni.scanCode进行扫码读取商品信息时发现在IOS端出现空白页，但是把条码对准摄像头却又能扫出来，怀疑是uniapp封装的uni.scanCode和ios不兼容的问题了，于是自己参照网上的实例用源生的html5写了一个。 uniapp的写法 scanCode(type) { //调起客户端扫码界面进行扫码，然后进入商品详情页 var current=""; if (type == 1) { current =
解决uni-app开发中使用uni.previewImage(OBJECT)方法一直黑屏加载问题
weixin_62460148的博客
08-23 1884
该如何解决，出现这种情况，我们查看一下我们的图片地址是否是本地，如果是本地，那么将图片转为网络图片即可。在使用uni.previewImage()方法的时候会发现，时间执行后一直黑屏加载，如下所示。因为我是请求到的数据，数据中格式是这样的。可能有人用的是本地图片，可以使用。所以我直接用拼接的方式解决 ，
uniapp开发，解决 .webp 格式图片在 ios 设备上无法正常显示的问题
孙少的博客
05-02 2722
1、解决 .webp 格式图片在 ios 设备上无法正常显示的问题 如图所示
解决 uni-app 地图 markers iconPath 路径引入的图片，打包app后，看不见图标，相对/绝对路径都不成 问题
Half of if的博客
04-20 1万+
目前有两种解决方案： 解决方式第一种：将地图组件后缀改用nvue，父页面后缀也要改成nvue，如果只单独改子组件后缀，打包之后引入图片还是看不见 解决方式第二种：不用将文件（map.vue）后缀改为nvue，只需要在manifest.json加入此参数，然后打包也能正常显示自定义图标图片 效果展示： ...
uni-app IOS设备图片选择后空白，选择多张图片，最后一张图片不显示
HRM2454的博客
12-16 1198
罪魁祸首：在公共的样式文件中写了image{will-change: transform} 解决方案：删掉image{will-change: transform}
在html2canvans截图的页面如何添加图片水印能够平铺到页面上并且旋转45度再通过appd方法需要去掉data的base64传参然后分享到微信
06-09
在 html2canvas 中添加图片水印可以通过在 canvas 中绘制水印图片来实现。具体实现步骤如下： 1. 在需要添加水印的 HTML 元素中插入一个 Canvas 元素，设置其宽高与目标元素相同。 2. 使用 html2canvas 将目标元素转换为 Canvas 对象，并将该对象绘制到刚刚创建的 Canvas 元素中。 3. 使用 Canvas API 绘制水印图片到 Canvas 中，可以使用 drawImage() 方法将图片绘制到 Canvas 中，使用 rotate() 方法旋转图片。 4. 将最终的 Canvas 对象转换为图片，并通过 appd 方法分享到微信。 示例代码如下： ``` // 获取需要添加水印的元素 const targetElement = document.getElementById('target'); // 创建一个 Canvas 元素，设置其宽高与目标元素相同 const canvas = document.createElement('canvas'); canvas.width = targetElement.offsetWidth; canvas.height = targetElement.offsetHeight; // 使用 html2canvas 将目标元素转换为 Canvas 对象，并将该对象绘制到刚刚创建的 Canvas 元素中 html2canvas(targetElement).then((canvasObj) => { const ctx = canvas.getContext('2d'); ctx.drawImage(canvasObj, 0, 0); // 加载水印图片 const watermarkImg = new Image(); watermarkImg.src = 'watermark.png'; // 绘制水印图片到 Canvas 中 watermarkImg.onload = function() { ctx.rotate(Math.PI / 4); // 旋转 45 度 ctx.drawImage(watermarkImg, 0, 0, canvas.width, canvas.height); // 将最终的 Canvas 对象转换为图片，并通过 appd 方法分享到微信 const dataUrl = canvas.toDataURL('image/png').replace(/^data:image\/(png|jpg);base64,/, ''); // 调用 appd 方法分享图片 appd.shareImage({ imageData: dataUrl }); } }); ``` 注意：为了避免 base64 数据长度过长，导致分享失败，可以使用 replace() 方法去掉 data 的部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值