如何将图像与模块耦合？

Posted 2023-02-23

【中文标题】如何将图像与模块耦合？

【英文标题】：How to couple images with a module?

【发布时间】：2017-07-23 17:16:51

【问题描述】：

这与this question.有关

我们在 Angular 1.6 中有一个刊头组件，我在使用 Angular 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。

【参考方案1】：

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