Question

我对Angular非常陌生并且将照片灯箱构建为一个学习项目。有没有办法使用项目文件夹外部的图像？我尝试使用这里引用的Glob（https://github.com/angular/angular-cli/issues/3555）并在.angular-cli.json文件中插入目录路径（见下文），但都没有成功。这是否可能在angular-cli？

 "assets": [
             "assets",
             "assets/img",
             "D:/training/img", // full path
             "../../../img",    // relative path
             "favicon.ico"
           ],

Answer 1

按照以下步骤操作：

我的图片位于src =＆gt; images =＆gt; 1.png它意味着位于资产文件夹外面

<强> .angular-cli.json

打开angular-cli.json文件，找到assets数组，在数组中添加你的文件夹名称，如图像。

"assets": [
  "assets",
  "images",
  "favicon.ico"
],

<强> componenet.html

<img src="images/1.png">

Answer 2

你应该能够通过glob实现这一目标。例如，如果我有一个文件夹结构

/outsideDirectory
    testImg.jpg
/myProject
    /node_modules
    /src
    .angular-cli.json

在你的cli.json中你可以定义glob

"assets": [
    {"glob": "**/*", "input": "../../outsideDirectory", "output": "./assets/"}
]

这会将您的outsideDirectory的内容复制到/dist/assets/目录。现在您可以在代码中使用图像

<img src="assets/testImg.jpg">

请注意，cli.json的资产适用于静态资产。如果要动态地将图像推送到outsideDirectory，最好自己托管图像或使用某些服务，然后使用完整的Url引用它们。这是因为你的glob中的图像只是outsideDirectory内容的一个副本（在构建时发生）。

Angular-cli：如何访问assets文件夹之外的图像

2 个答案: