Question

有关我的Angular版本的信息：
Angular CLI：7.3.9

Node: 10.15.3   
OS: win32 x64   
Angular: 7.2.15   
... animations, common, compiler, compiler-cli, core, forms   
... language-service, platform-browser, platform-browser-dynamic    
... router

我面临的

问题是：

在开发版本/环境中：
Angular的assets文件夹中的图像不会出现。
当您检查路径时，它显示为“ http://localhost:4200/assets/sample.jpg”，并显示HTTP错误404（未找到）。
在HTML模板中，其写为
<img width="300" alt="Angular Logo" src="assets/sample.jpg">
sample.jpg位于此文件夹myapp/src/assets/sample.jpg

中

在产品构建/环境中：
assets文件夹不会在dist文件夹本身中进行编译和生成，因此，它也不会在此处显示。

即使是从Angular CLI生成的新项目也是如此。网站图标也会发生这种情况。

这是我在assets中build和test下的angular.json数组。

    "assets": [
      "src/favicon.ico",
      "src/assets"
    ],

我验证了我的文件名和路径。
尝试在同一台计算机上创建几个独立的项目。

PS：
现在，我开始怀疑这是否是由于某些计算机限制。我正在使用受限用户访问权限设置的计算机上工作。这可能是原因吗？任何系统级别的限制都可以阻止图像加载？

Answer 1

Temp O'rary：这绝对可能是访问权限问题，从我阅读的所有内容来看，可能是。我说这是因为您提到 assets文件夹不会在dist文件夹本身中编译和生成。

尝试创建项目或将项目移动到其他驱动器。例如。弗兰克在Angular 6 Failing To Load Images From Assets上的评论描述了他将自己的代码存储在BitBucket中的原因，这听起来像是您遇到的同一问题。

这听起来也像您有足够的技术背景，知道文件中的区分大小写会影响事物，但是...由于您正在使用CLI生成项目，因此我认为您至少应该看到已编译版本中的资产，因此这可能不是这里的问题。

Answer 2

确保您拥有angular.json中声明的资产：在架构师下->构建：

architect": {
        "build": {
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "assets": [
              "src/assets"
            ],

Answer 3

尝试在资产/ ...前面添加“ ./”。

<img width="300" alt="Angular Logo" src="./assets/sample.jpg">

Answer 4

您可以使用

<img width="300" alt="Angular Logo" src="../../assets/sample.jpg">

每个“ ../”均指当前目录之前的一个目录。例如，如果您在src / app / someComponent中，则必须使用“ ../../assets”访问资产目录，因为资产和src在同一目录中。

Answer 5

想要背景图片吗？这行得通。

src
--app
  --customComponent
--assets

在customComponent.css

中

:host{
  background-image : url("~src/assets/equaljustice.PNG");
}

Angular 7+：资产文件夹中的图像不出现

5 个答案: