Angular2,Angular-cli,Webpack - 生产部署后GitHub页面上的图像资源无法加载

8


这不是一个重复的问题:

这个问题 解释了这个问题,但该项目没有使用angular-cli构建,因此我没有webpack.config文件。

虽然我所描述的问题显然是关于正确设置base_url的,但它与这个问题不同,后者是关于设置angular以向类似API的base_url发送请求。


我的项目在本地主机上构建和运行,而且还可以在github:pages上运行(即使所有css都正确加载)。唯一在github:pages上不起作用的是图片,它们都返回404(即使我可以通过直接在浏览器中导航到assets文件夹来查看它们)。

问题在于,在本地主机上,angular-cli在主机名后没有子文件夹运行该项目。但是在github:pages上需要。

例如,如果项目名称为testapp,则在github:pages上部署在这里:

https://<username>.github.io/testapp

图像位于
src/assets/images

在 Angular 2 组件中,它们被引用为相对路径的 CSS,例如:

background-image: url('../../assets/images/dining-room.png');

那么,我应该如何配置Angular 2的生产部署文件,以便在生产环境中路径变为:
background-image: url('testapp/assets/dining-room.png');

我知道github:pages基于Jekyll,我也理解这个解释,但我不知道如何配置angular-cli项目以使其意识到github:pages使用一个文件夹来部署应用程序。
更新1 到目前为止,我已经发现命令行可以使用base_href选项来部署到github:pages。所以我可以这样做:
ng github-pages:deploy --base-href /testapp/

然后我可以在/dist文件夹中看到HTML文件已更改以包含base href,如下所示:

<base href="/testapp/">

我本来以为这会自动解决问题,但图片仍然返回404错误。像你期望的那样,此base_href并未自动注入相对路径中。在本地环境中,index.html文件有<base href="/">,显然可以正常工作。
更新2:
尝试解决此问题时,我开始相信这与Angular构建组件的方式有关。可以在这里找到一个很好的解释。
编辑:添加了angular-cli.json
{
  "project": {
    "version": "1.0.0-beta.22-1",
    "name": "floorbook"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "fb",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

你能发布你的 angular-cli.json 文件吗? - SeleM
angular-cli.json 已经添加。 - rmcsharry
2
而负评是因为......有人没有收到圣诞老人的礼物吗? - rmcsharry
2个回答

12

理解Angular2中的所有组件都声明为相对路径是解决这个问题的关键。简单地说,这意味着当ng构建/编译您的项目时,一切都相对于根目录。请参见问题中的链接UPDATE 2。

因此,我的CSS文件是本地组件,并且在我的 app/src 层次结构中深入了2个文件夹。这就是我引用图片的方式。

../../assets/images/<file>.png

但是当 Angular 构建时,/assets/images 在根目录下 - 构建后可以在 DIST 文件夹中看到(即在运行ng github-pages:deploy后)

所以我需要做的就是将 CSS 更改为直接从根目录引用(即忽略该 CSS 文件位于组件中的 2 个文件夹深度):

assets/images/<file>.png

然后使用以下命令进行构建:

ng github-pages:deploy --base-href /testapp/

在生产环境中,这些图像链接将会工作,因为 /testapp/ 现在是根目录,并且它们是相对于根目录的,因此:

/testapp/assets/images/<file>.png


我认为的问题的答案 - 如何从组件内部访问APP_BASE_HREF

供将来参考,其他来到这个问题的人可能会像我一样思考,并且需要在组件中直接访问base-href来解决这个问题。由于我找到了如何做到这一点,所以我想在这里添加:

1- 在你的app.module.ts中,你需要导入并提供它:

import { APP_BASE_HREF } from '@angular/common';

providers: [{provide: APP_BASE_HREF, useValue : '/your-value/'}]

警告 - 请注意,这将硬编码您的生产基本 href。这将覆盖您在 index.html 中设置的任何内容(因此使用 ng build 命令行选项将是无意义的,因为它会在 DIST 文件夹中创建 index.html 中的该设置)。

2 - 在您的组件中添加 2 个导入并在构造函数中注入 APP_BASE_REF

import { APP_BASE_HREF } from '@angular/common';
import { Inject } from '@angular/core';

constructor(@Inject(APP_BASE_HREF) private baseHref:string) { 
  console.log(this.baseHref);
}

重要提示

如果在上述步骤1中,您将值设为:

useValue : '/'

然后将其部署到github:pages上...当您浏览应用程序时,它将停止使用文件夹名称(在应用程序加载后,它会从地址栏中简单消失...尽管应用程序将继续运行)。

最后

截至2016年12月30日,在组件内部使用图像并使用本地相对路径引用它们不再可行。请参见此处此处


嗨!我认为我遇到了和你一样的问题。我有一个Angular应用程序托管在服务器上。URL地址类似于someserver.com/myApp。因此,当我访问网站时,无法看到图像资产,因为浏览器试图在someserver.com/assets/内查找它们。在本地,我只需设置img url,如:url('assets/Images/image.png'),就可以正常工作。根据您的解释,您将如何解决它? - Gerardo Tarragona
@Gerardo 请查看我回答末尾的两个链接。 - rmcsharry

2

我在开发模式下的本地主机上遇到了类似的问题。每当我更新SCSS文件时,我的背景图像就无法在浏览器中显示。我的所有背景图像都引用相对路径,例如: background: url(../../assets/heros/contact-hero-mbl@2x.jpg);。我将图像路径更新为: background: url(/assets/heros/contact-hero-mbl@2x.jpg);,现在一切都正常工作了。希望能帮助到有需要的人。


网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接