前端动态图片123
2020-05-08 本文已影响0人
贾老师和他的朋友们
复杂
前端显示动态图片场景很多,例如二维码,最近常见的健康码大家应该不陌生。总结一下:
1、通过流写入图片字节码。
<image src='http://ip:port/123'/>
小白可能认为没有扩展名是不是很怪,其实这个url不是图片地址,是生成图片的url,后台生成图片,把图片流输出的前端就可以了。web端没有任何问题,uniapp开始时保存图片出了问题,因为没有扩展名,手机端无法保存!
<image src='http://ip:port/123.png'/>
这么做更像图片!
2、后端返回base64图片
我用上面的方式失败了,web端没测试;uniapp显示不出来,我不确定是我写法问题还是其他问题,base64肯定是正确的,已经验证了。前端发请求,得到base64然后赋给src,问题解决。这时的坑在于:
1、加扩展名有问题,ajax请求返回406,网上有方案,我没测试,而是去掉了url后的扩展名。
2、保存图片还是有问题。
3、base64要处理一下,去掉换行和空格。
我更喜欢方案1,不改变前端的处理方式。
web+移动导致问题复杂,上面的问题不一定是我认为的原因,解决方案也不一定是唯一的,只能作为参考。