Angular-cli：如何访问assets文件夹之外的图像 [英] Angular-cli: How can I access images outside of the assets folder

问题描述

我是Angular的新手，并将照片灯箱打造成一个学习项目。有没有办法使用项目文件夹外部的图像？我已尝试使用此处引用的Glob（ https://github.com/angular / angular-cli / issues / 3555 ）并在.angular-cli.json文件中插入目录路径（见下文），但都没有成功。这是否可以在angular-cli？

I'm very new to Angular and building a photo lightbox as a learning project. Is there a way to use images from outside the project folder? I've tried using the Glob as referenced here(https://github.com/angular/angular-cli/issues/3555) and inserting a directory path in the .angular-cli.json file (see below) both without success. Is this possible in angular-cli?

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

推荐答案

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

You should be able to accomplish this with the glob. For example if I have a folder structure

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

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

In your cli.json you can define the glob

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

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

This will copy the contents of your outsideDirectory to the /dist/assets/ directory. Now you can use the image within your code

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

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

Note the cli.json's assets is for static assets. If you are pushing images to outsideDirectory dynamically, it is better to host the images yourself or use some service, then reference them with a full Url. This is because the images from your glob are only a copy of the outsideDirectory contents (that occurs at build time).

这篇关于Angular-cli：如何访问assets文件夹之外的图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！