Angular-Cli：如何访问资源文件夹之外的图像

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

您应该能够使用 glob 来完成此操作。例如，如果我有一个文件夹结构

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

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

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

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

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

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