ionic3 解决img标签无法在手机上正常显示问题

问题阐述:

本人使用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”

问题很小,需要细心观察,一般图片无法显示都是路径出现问题。希望我的方案能节省您解决问题的时间!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值