【问题标题】：Image not loading after "build" in angular8在angular8中“构建”后图像未加载
【发布时间】：2019-07-10 10:30:44
【问题描述】：

问题是"assets" 文件夹中的图像路径在ng build 之后未加载。

在将路径更改为index.html 的<base href="/skstose/"> 后，我正在运行ng build。

开发环境是指ng serve。 prod 环境表示编译后的ng build。

1) 以下问题在开发环境中：-

Module Error (from ./node_modules/postcss-loader/src/index.js):
(Emitted value instead of an instance of Error) CssSyntaxError:
Can't resolve 'assets/images/skistose/kgExtract.png' in 'E:\Workspace\skistose\src\app\skistose-kg-extract'

> 2 |   background: url("assets/images/skillStore/kgExtract.png") no-repeat;
                    ^

2) 以下问题是在 prod 环境中：-

.css

.bg{
    background: url(/assets/images/skillStore/kgExtract.png) no-repeat
}

在dev environement 工作，但不在prod environment。

.css

.bg{
    background: url(assets/images/skillStore/kgExtract.png) no-repeat
   }

在prod environment 工作，但不在dev environment。

但是，<img src="assets/images/skillStore/uploadFile.png"> 在dev environment 和'prod environment' 中运行良好。

在开发环境中，

 <base href="/">

在产品构建中：-

 <base href="/skstose/">

【问题讨论】：

标签： angular

【解决方案1】：

不要在 index html 中编辑；

要在 url 中构建，请尝试以下代码：-

ng build --prod --base-href='/skstose/'

Url 链接会这样打开'http:/test.com/skstose'

这里是资源：- https://angular.io/guide/deployment

【讨论】：

还是同样的问题
url 路径将与 "url(assets/images/skillStore/kgExtract.png) no-repeat" 相同，只需使用 ng build --prod --base-href='/skstose/' 构建/跨度>
但在开发环境 ng serve 中，它没有加载图像。
在开发服务器中你把你的 url 路径放了什么？
背景：url(/assets/images/skillStore/kgExtract.png) no-repeat ...这是有效的，但背景：url(assets/images/skillStore/kgExtract.png) no-repeat不工作。

【解决方案2】：

您的 dist 文件夹中是否在 ng build 之后获得了 assets 文件夹？

如果不尝试使用ng build --prod 并检查

【讨论】：

我只是在尝试 ng build 并将路径更改为 index.html 的。在谷歌浏览器开发工具上检查图像时，我发现了这个问题。

【解决方案3】：

您的文件“index.html”必须包含：

<base href="/">

尝试以这种方式搜索您的图片

background-image: url(../../../../../assets/My-image_2020.jpg);

然后构建你的项目

ng build --prod --base-href /skstose/

最终结果（已编译）负责为您的文件提供上下文

PD：要在本地工作，无需更改<base href="/"> 中index.html 中的路径

【讨论】：