2017-03-03 70 views
4

耦合图像这是关系到this question.角CLI - 与模块

我们在角1.6报头部分,我现在用的角CLI移植到Angular2一个项目。在Angular 1.6中,很容易在控制器和CSS的旁边放置图像,然后使用相对于组件目录的路径轻松引用它。例如:

-components 
--my-component 
---my-component.controller.js 
---my-component.css 
---my-image.jpg 

In my-component.css: 
background-image: url(my-image.jpg); 

根据引用的问题,这对于Angular CLI来说是不可能的。他们建议将图像移动到资产文件夹。不是一个理想的解决方案,但没关系。当然,如果我将这个组件分成它自己的node_module并从那里导入,Angular将足够聪明以允许相对于node_module的路径,对吧?到目前为止,也没有运气。

那么我们期望如何使用包含特定于该模块的图像的node_modules?现在我们明显的解决方法是添加一个后期安装脚本,将图像从模块复制到依赖项目的资产文件夹中 - 但这看起来很乱,并且需要我们假定他们有特定的资产文件夹设置。

总结:

  • 是否有某种方式来引用位于组件相对于该文件夹的文件夹的图片?
  • 如果没有,是否有某种方法可以引用位于node_module相对于node_module的图像?
  • 如果没有,那么设置和维护模块以及其图像的最佳方式是什么?是安装解决方案的最佳主意吗?

这是我的大脑,这是我第一次真正质疑Angular2和CLI。提前致谢!

回答

0

Angular CLI将基于webpack默认包含的设置将图像渲染控制权终止到webpack。您可以通过执行ng-eject命令,通过从Angular CLI中弹出webpack来更改默认设置。完成此操作后,您可以在webpack.config.js文件中引用您的图像。