ionic3 解决img标签无法在手机上正常显示问题
来源:互联网 发布:win7优化软件 编辑:程序博客网 时间:2024/05/17 05:04
问题阐述:
本人使用img标签为页面引入一个图片,在浏览器能够正常显示,但是打包安装到手机端时确无论如何都显示不了。
解决方案:
一般这种情况有很多可能性,比如说:
- 引用路径不对
- 图片没有加载
- 图片损坏
- ……
下面是我程序中的代码:
乍一看并没有什么毛病,在src/pages/home目录下的home.html文件中若想引用src/assets/imgs下的logo.png文件相对路径就是”./../assets/imgs/logo.png”。
这样在浏览器中显示完全没有问题,为什么在手机中就不行呢?
我将生成的apk包改成zip格式,打开后一探究竟,文件结构如下:
这时候我意识到ionic中各个page页下的html在被调用的时候会以模块的形式插入到index.html文件的ion-app标签中,因此从上面的文件结构来看,在用到assets/imgs目录下的logo.png图片时src的路径应该是”./assets/imgs/logo.png”
修改之后可以在手机中正常显示了,另外要提醒一点,如果在scss文件中为元素添加css样式时需要引用图片,同样需要注意一下路径问题。所有的scss文件最终会写入到build文件夹下的main.css文件中(如上图),所以同样如果想引用logo.png文件那路径应该是”./../assets/imgs/logo.png”
问题很小,需要细心观察,一般图片无法显示都是路径出现问题。希望我的方案能节省您解决问题的时间!
阅读全文
1 0
- ionic3 解决img标签无法在手机上正常显示问题
- 在乐视2手机上解决kindle阅读器即译时音标显示正常的问题
- html5 viedo视频标签在手机上无法正常播放解决方法
- 解决JFreeChart无法正常显示中文问题
- 解决JFreeChart无法正常显示中文问题
- img标签在jsp页面无法显示时该怎么办
- primeFaces标签无法正常显示
- 解决Bootstrap网页在360安全浏览器兼容模式下无法正常显示问题
- struts-dojo-tags datetimepicker标签无法正常显示问题 解决方案
- 解决VC9.0的程序无法在vista上正常运行的问题
- Img图片标签显示问题
- 解决img标签空隙问题
- 解决img标签间距问题
- 解决用<img src="<%# Eval("ShowPhoto")%>"动态绑定图片,发布到IIS上无法显示的问题
- 解决qt程序在板子上不能正常显示中文的问题
- 解决Android Studio 2.2.3中添加.cpp .h文件在Project->Android无法显示,无法正常编译问题。
- img标签中文路径无法显示
- H5 img标签图片无法显示 -- 解决方案
- XOR HDU
- 解决ThinkPHP5使用uploadify上传文件session无法传递的问题
- hdu6231 K-th Number(二分答案+尺取)
- linux中断编程、中断基础介绍
- POJ2635
- ionic3 解决img标签无法在手机上正常显示问题
- 1070. 结绳(25)
- PyQt4 精彩实例分析 实例1 Hello Kitty!
- HDU-1789 Doing Homework again (贪心+树状数组+二分)
- 资讯类项目无限轮播Banner+圆点指示
- TensorFlow基础2:Session.run()和Tensor.eval()的区别
- sql语句优化
- shell学习笔记(一)
- SAP MM培训(仅限沈阳地区)