angular4项目开发中背景图片地址的引用

随着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');