Javascript Angular cli：如何访问资产文件夹之外的图像

作为一个学习项目，我对制作一个照片灯箱非常陌生。有没有办法使用项目文件夹外的图像？我尝试使用此处引用的Glob（）并在.angular-cli.json文件（见下文）中插入目录路径，但都没有成功。这是否可能发生在angular cli中

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

---

您应该能够用glob完成这一点。例如，如果我有一个文件夹结构

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

在cli.json中，您可以定义glob

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

这将把Outside目录的内容复制到

/dist/assets/

目录。现在，您可以在代码中使用图像

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

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

请遵循以下步骤：

我的图像位于src=>images=>1.png，表示位于资产文件夹之外

.angular cli.json

打开angular-cli.json文件，在数组中查找资产数组并添加文件夹名称，如图像

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

componenet.html

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

对于纯cli配置，我不这么认为，我一直在考虑在构建之前添加gulp以复制资产下的文件。已测试的答案-非常感谢，非常有用。图像被拉入dist文件夹，我可以看到UI正在为图像获取正确的路径，但是它们显示为断开的链接。我正在使用一个服务传入一个json，其中一个url指向dist文件夹中的图像。还在努力解决这个问题，明白了吗！。。。我需要更仔细地阅读你的回答。任何跟随我脚步的人。npm install glob--将Add glob行（上图）保存到angular-cli.json资产数组中，并引用html（而不是dist/assets）运行ng中的资产目录build@RobertPrice我很高兴它成功了！作为旁注，您不需要

npm安装glob--save

，glob是@angular/cli的一个依赖项，因此您可以在安装@angular时将glob安装到节点_模块/cli@LLai我现在在Angular 11工作，我看到了你的答案，它确实帮助了我，但问题是它总是重新加载页面。你知道为什么吗？这确实有效。但不要将“图像”文件夹放在“资产”文件夹中。这就是我做错的原因。