Angular-cli：我如何访问资产文件夹以外的图像

问题描述：

我对Angular非常陌生，并且将照片灯箱制作为学习项目。有没有办法使用项目文件夹外的图像？我尝试过使用Glob（https://github.com/angular/angular-cli/issues/3555），并在.angular-cli.json文件中插入一个目录路径（见下文），但都没有成功。这是可能的角度cli？Angular-cli：我如何访问资产文件夹以外的图像

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

不这么认为纯CLI配置，已与增加一饮而尽下的资产建立之前复制文件的想法玩弄。 –

答

你应该可以用glob来完成这个任务。例如，如果我有一个文件夹结构

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

在你cli.json您可以定义水珠

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

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

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

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

谢谢绝对有帮助。图像被拖入dist文件夹，我可以看到UI正在为图像获取正确的路径，但是它们显示为断开的链接。我正在使用服务传递一个带有指向dist文件夹中图像的url的json。仍然试图通过 https://github.com/itLead797/ImageGallery –

知道了！...我需要更仔细地阅读您的回应。任何追随我的脚步的人。 npm install glob --save 将glob行（上面）添加到angular-cli.json assets数组引用html中的资产目录（不是dist/assets）运行build –

@RobertPrice我很高兴它工作正常！作为一个方面说明，你不需要'npm install glob --save'，glob是@ angular/cli的依赖关系，所以你在安装@ angular/cli时将glob安装到node_modules – LLai

答

按照下列步骤进行：位于SRC

我的图片=>图像=> 1.png就意味着位于该资产文件夹

.angular-cli.json

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

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

componenet.html

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

Angular-cli：我如何访问资产文件夹以外的图像

相关推荐