新手前端微信小程序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
新手前端微信小程序img图片无法显示问题相关推荐
- 微信小程序背景图片不显示
最近学着写了一个微信小程序,可是总是是加载不出背景图片.这里先描述一下问题. 用下面这种办法声明的背景图片在本机和手机上都无法显示. .container { height: 100%; displa ...
- 关于微信小程序发布图片与显示（spring boot+mysql)
在做完小程序上传图片到后台(springboot)后,不少人会发现,自己上传到服务器的图片不知怎么传到数据库,以及怎么才能从数据库中读取图片url进行显示.下面将进行疑点解答. 1.上传的图片缓存到本 ...
- 微信小程序rich-text图片不显示及图片过大问题解决办法
js部分代码: that.setData({// 文章内容图片不渲染因为图片是本地的,所以找不到content: res.data.content.replace('/public', 'https: ...
- 微信小程序，图片居中显示，适配不同机型
<view style='width:100%;height:100%;text-align:center;' class="picture-2"> <ima ...
- 微信小程序布局图片上面显示文字
实现的效果: xml布局文件: <view class="image-parent"> <image class='image' mode='widthFix ...
- web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
- 微信小程序：图片拼图小程序源码
该款小程序支持多种流量主 另外支持多种图形模板制作切割 另外也支持长图合成等功能 安装简单,新手容易上手,具体就不多说了大家自行研究吧! 小程序源码下载地址: 微信小程序:图片拼图小程序源码-小程序文 ...
- 微信小程序 发帖 图片功能开发
微信小程序 发帖 图片功能开发 用途:论坛交流里,用户通常会发帖,包含文字和图片 前端界面 上传界面的前端代码 <!--pages/addpost/addpost.wxml--><f ...
- 新手入门微信小程序-从注册到开发（校庆头像框）
微信公众号:数学建模与人工智能 GitHub - QInzhengk/Math-Model-and-Machine-Learning 展示效果: 最近从网上找了一个开源的生成和校庆有关的微信头像小程 ...
最新文章
- Bitmap使用PictureBox后提示Bitmap占用
- ASP.NET Get和Post两种提交的区别
- tableau实战系列（六）-小面积图表如何完整显示标签
- XGBoost的基本使用应用Kaggle便利店销量预测
- Luogu1574 超级数
- 属于c语言高级参数的,c语言可变参数的取值
- 熊孩子巨额充值打赏，互联网公司该不该退钱？
- nodejs TCP服务器和客户端通信的socket结构
- Find non-overlap jobs with max cost
- 【2018.3.10】模拟赛之四-ssl2133 腾讯大战360【SPAF,图论,最短路径】
- List VS Set
- 【联盛德W806上手笔记】二、GPIO
- php array walk 效率,php代码优化系列（二） -- array_walk 和 foreach, for 的效率的比较...
- ribbon设置权重_spring cloud gateway+ribbon 组合指定版本权重分流（简易灰度发布实现）...
- 工作中常用的Linux命令（不断更新中）
- 『深度应用』一文搞懂深度学习人脸识别模型开发流程
- 2018最新qq的服务器地址,腾讯QQ2018正式版新功能详细介绍
- 用FCM函数实现模糊C均值聚类算法
- Vue脚手架安装教程
- linux如何开启cpu热插拔,Linux走向真正的CPU热插拔支持