新手前端微信小程序img图片无法显示问题

最近自己在做毕设,是一个微信小程序,虽然自己有一点前端开发经验,以为小程序前端和这个差不多可以直接开撸,但是这两天被一些图片问题烦了好久。

这也是自己第一次写博客,实在太生气了,网上也没找到自己想要的结果,所以写下来记录下来,顺便让和我一样错误的人知道咋解决,笑cry,虽然真的很低级的错误。
以下是遇到的问题。
1:在开发者工具可以显示图片,手机预览,真机调试却看不到。
2:在最开始的iphone5环境里调试开发,设置的图片是定位而且定位 top:0rpx;在父级元素上的,不同环境却有空白部分。
ps:所有这些都是在建立本地开发环境上的,上线的我不知道。

然后以下是自己解决方法。
1:原来是图片名字是带有了中文,但是在开发者工具可以看到,在手机预览上却没有看到,我把它换成英文就没事了。主要是自己在阿里图标下的图片,自带中文,而自己在tab里设置的图片也是中文名字的,但是没事,一切照常显示,所以我以为这样是可以的,当然我不知道上线后会不会有改变,我的小程序目前只是在本地开发,还没有。所以总结是:image标签路径里文件名不能带有中文,不然,虽然在电脑开发能看到,手机预览看不到的(个中缘由我也不清楚)。
2:看了很久wxml,wxss,后再调试才发现是image的mode属性设置的问题,因为图片不够大,而view又比较大,mode设置的是bottom,所以在有些设备情况下,图片上面会有留白,同理,center也是。
下面再分享下自己在csdn上看到的另一个可能对新手有帮助的有关微信小程序image显示的问题的帖子吧。

微信小程序 图片在真机不显示跳坑总结
https://blog.csdn.net/qq_35112961/article/details/78247108
em…现在再看才发现,原来里面有自己的情况啊,是自己大意了没有检查啊。

那么就总结如下吧:
1:本地开发环境下,tab里设置的图片文件名里可以带有中文名,但是在image标签里不行。
2:本地开发环境下,image标签的mode设置为bottom,center之类的不缩放显示下面图片时,如果图片不够大,父级元素又很大的时候,可能上面会有留白,即使设置了定位top:0rpx;也没用。

oh yeah 人生中第一篇博客。哈哈哈哈。。。2333

猜你喜欢

转载自blog.csdn.net/weixin_37342647/article/details/88019561