ionic1文件路径问题

Bmob 发布于2019-06-25 11:39 / 3426人阅读

摘要：文件路径问题根据项目的需求，需要使用来完成的开发，我也就开始了的学习。虽然从相对路径来说没有任何问题，但是手机不支持以上的代码在真机和浏览器中运行都没有任何问题。

ionic1文件路径问题

根据项目的需求，需要使用ionic来完成App的开发，我也就开始了ionic的学习。根据业务需求，使用的是ionic1.x，踩了很多的坑，比如ionic在使用文件的时候的路径问题，让我很头疼了一阵子，最后参考网上一些朋友的技术博客，解决了这个问题，所以记一下笔记，以备以后查看或者能帮到一些朋友。

项目大体的文件结构

文件目录大体介绍

*scss文件夹下面是scss文件，在当前项目下使用命令：glup scss 可以动态修改ionic.app.min.css文件
*www/assets文件夹下面存放的是项目需要用到的图片文件
*lib/ionic/css文件下面存放的是项目的css文件

在html文件中引用其他的html

使用ionic开发项目过程中需要创建公用的html页面，比如：我们不想使用那我们可以自己创建自定义的html，然后动态加载到不同的html页面中。

html动态加载其他html的时候路径需要按照index.html文件的位置作为参考，因为在运行时，其他html代码会被动态加载到index.html中

贴一下项目文件图：

贴一下引用html的代码

waitForWork.html引入common.title.html页面做为title，templates文件夹与index.html文件

以上的代码用浏览器F12测试没有任何问题，但是在真机中无效。虽然从相对路径来说没有任何问题，但是手机不支持

以上的代码在真机和浏览器中运行都没有任何问题。以上两种写法都一样！

引用assets文件中的图片 贴一下项目文件结构

贴一下html代码

在html中直接使用图片，文件路径要相对于index.html文件路径

style="background-image: url("../assets/global/img/login/login_bg.jpg")
style="background-image: url("../../assets/global/img/login/login_bg.jpg")

以上代码在浏览器中好用，在Android手机中不能使用，但是不建议直接在html中使用style，为了代码整洁要写到css文件中

style="background-image: url("./assets/global/img/login/login_bg.jpg");
style="background-image: url("assets/global/img/login/login_bg.jpg")"

  以上代码在真机和浏览器中都好用，但是不建议直接在html中使用style，为了代码整洁要写到css文件中

在css中使用图片

.gridCheck-upload-btn {
width: 80px;
height: 22px;
background: url(../../../assets/global/img/gridCheck/icon_upload_default.png) no-repeat;
background-size: 100% 100%
}

以上代码在Android真机和浏览器中都能使用，文件路径基于ionic.app.min.css的位置

混合云云服务器 asp路径问题 jsp域名路径问题 java图片路径问题 java页面路径问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/13992.html

ionic1文件路径问题

摘要：文件路径问题根据项目的需求，需要使用来完成的开发，我也就开始了的学习。虽然从相对路径来说没有任何问题，但是手机不支持以上的代码在真机和浏览器中运行都没有任何问题。 ionic1文件路径问题根据项目的需求，需要使用ionic来完成App的开发，我也就开始了ionic的学习。根据业务需求，使用的是ionic1.x，踩了很多的坑，比如ionic在使用文件的时候的路径问题，让我很头疼了一阵子...

PascalXie 2019-08-21 17:13 评论0 收藏0
ionic1使用ImagePicker插件并且显示中文（汉化）

摘要：在使用开发时，打开相册应该是使用比较频繁的插件之一。解决办法可以看我另一篇文章使用在安卓手机上闪退问题参考文献之图片选择插件使用插件中文显示在使用ionic开发时，打开相册应该是使用比较频繁的插件之一。下面讲讲我在项目中使用（这部分官方比较详细，就简单描述）以及解决插件显示英文问题 1、imagepicker安装cordova plugin add cordova-plugin-im...

Vultr 2019-08-26 11:41 评论0 收藏0
ionic1使用ImagePicker插件并且显示中文（汉化）

摘要：在使用开发时，打开相册应该是使用比较频繁的插件之一。解决办法可以看我另一篇文章使用在安卓手机上闪退问题参考文献之图片选择插件使用插件中文显示在使用ionic开发时，打开相册应该是使用比较频繁的插件之一。下面讲讲我在项目中使用（这部分官方比较详细，就简单描述）以及解决插件显示英文问题 1、imagepicker安装cordova plugin add cordova-plugin-im...

liuyix 2019-08-01 18:35 评论0 收藏0
ionic1使用imagepicker在安卓手机上闪退问题

摘要：在上一篇文章中，提到了如何在中使用插件，并且实现该插件显示中文汉化问题有兴趣可以看看使用插件并且显示中文汉化这次要解决的问题是在一些手机上打开相册时，莫名闪退问题。，没有闪退，运行正常。这样就能在以上的手机使用参考相册插件和监听返回键在上一篇文章中，提到了如何在ionic1中使用imagepicker插件，并且实现该插件显示中文（汉化）问题有兴趣可以看看：ionic1使用ImageP...

EscapedDog 2019-08-26 11:41 评论0 收藏0
ionic1使用imagepicker在安卓手机上闪退问题

摘要：在上一篇文章中，提到了如何在中使用插件，并且实现该插件显示中文汉化问题有兴趣可以看看使用插件并且显示中文汉化这次要解决的问题是在一些手机上打开相册时，莫名闪退问题。，没有闪退，运行正常。这样就能在以上的手机使用参考相册插件和监听返回键在上一篇文章中，提到了如何在ionic1中使用imagepicker插件，并且实现该插件显示中文（汉化）问题有兴趣可以看看：ionic1使用ImageP...

CatalpaFlat 2019-08-01 18:35 评论0 收藏0