angular4项目开发中背景图片地址的引用
来源:互联网 发布:友友贷网络贷款 编辑:程序博客网 时间:2024/06/04 18:49
随着angular4的出来,angular-cli也升级了,之前使用[1.0.0-beta.xxx]的版本,在组件的样式文件中直接使用
assets/images/xxx
图片路径,现在新版本的路径是直接从当前组件开始查找
一、解决关于@angular/cli:1.4
的图片路径的方法有
- 1、在组件中直接使用
./../../../
去查找图片路径 - 2、在组件中创建一个存放图片的工作目录,就省去了
./../../../
的查找 3、图片继续放在
assets
目录下,现在使用scss
来处理图片路径的问题- 1、创建
scss
的angular
项目ng new sassy-project --style=scss
2、在
assets/css
下创建一个scss
的文件/*定义背景图片的路径*/@mixin bgImg($pathNo, $pathName, $name) { @if $pathNo==2 { background: url('./../../assets/images/'+$pathName+'/' + $name) no-repeat; } @if $pathNo==3 { background: url('./../../../assets/images/'+$pathName+'/' + $name) no-repeat; } @if $pathNo==4 { background: url('./../../../../assets/images/'+$pathName+'/' + $name) no-repeat; } @if $pathNo==5 { background: url('./../../../../../assets/images/'+$pathName+'/' + $name) no-repeat; }}
3、在组件的
scss
目录下使用@include bgImg(5, 'index', 'njf_news_ioc.png');
- 1、创建
阅读全文
0 0
- angular4项目开发中背景图片地址的引用
- angular4开发中对请求数据层的封装
- Angular4 中常用的指令
- angular4中样式的绑定
- 【项目开发】HTML中使背景图片自适应浏览器大小
- 项目开发中引用程序集的管理
- Angular4记账webApp练手项目之二(在angular4项目中使用Angular WeUI)
- Angular4记账webApp练手项目之三(在angular4项目中使用路由router)
- android 项目中设置背景图片
- Vue项目中设置背景图片
- c++中地址和引用的区别
- 函数声明中地址引用的作用
- C++中地址和引用的异同
- Angular4中[ngClass]、[ngStyle]的基本使用
- angular4中关于表单的校验
- Angular4 中显示内容的 CSS 样式
- angular4开发环境搭建以及项目启动过程
- Angular4.x开发环境及项目创建(一)
- 进程间通信(一)无名管道
- Genymotion 模拟器中安装微信
- <android>一个老控件Spnner解决一个bug的经历(三级联动)
- MVC WebApi自定义异常过滤器
- Java BigDecimal和double
- angular4项目开发中背景图片地址的引用
- Python学习笔记_字典、集合
- Button的imageEdgeInsets、titleEdgeInsets
- 【转】python格式化字符串的方法汇总
- java.io.IOException: No space left on device
- Top Journals of Computer Network & Wireless Communication
- 关于大文件传输问题的避免和解决办法
- 芯片制造全工艺流程详情,请收藏!
- [IOS笔记]UITableView及索引条