在angular8中的“ ​​build”之后图像未加载

Question

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

将路径更改为ng build的{​​{1}}后，我正在运行<base href="/skstose/">。

开发环境表示index.html。 产品环境是指编译后的ng serve。

1）以下问题出现在开发环境中：-

ng build

2）以下问题在生产环境中出现：-

.css

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;
                    ^

在.bg{ background: url(/assets/images/skillStore/kgExtract.png) no-repeat } 中工作，但在dev environement中工作。

.css

prod environment

在.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="/">

Answer 1

不要在索引html中编辑；

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

  

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

网址链接将像这样'http:/test.com/skstose'

打开

以下是资源：-https://angular.io/guide/deployment

Answer 2

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

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

Answer 3

按照 rajhim 的建议，在使用href参数进行构建时需要设置href。尽管您一直在执行的操作可能会起作用，但是问题是您如何提供资产网址。

您可以尝试以下方法：

background: url(~src/assets/images/skillStore/kgExtract.png) no-repeat

Answer 4

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

<base href="/">

尝试以这种方式搜索图片

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

并建立您的项目

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

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

PD：要在本地工作，无需更改<base href="/">的{​​{1}}中的路径