Html 在带有缓存哈希处理的角度模板中插入image/svg/任意内容

具有具有以下内容的资产文件夹：

• /资产/图像/图像1.png
• /assets/svg/svg1.svg

如何将其包含在HTML模板（而不是CSS文件）中，以便使用angular/webpack自动启用缓存破坏（将automaticallt

assets/images/images/image1.jpg转换为
assets/images/image1-4d5678xc0v987654v.jpg
？
目标是处理缓存并在现有文件更新时尽快刷新它

使用webpack，我曾经做过一个：

<img src="<%=require("./assets/img/image1.jpg")%>" />

“/>

我在angular中找到的唯一解决方案是要求将所有图像都保存在.ts文件中，但这样做相当痛苦：

const image1src = require(`../assets/images/image1.jpg`);
class Component {
    image1 = image1src; // contains image1-4d5678xc0v987654v.jpg
}
// and in template : <img [src]="image2" />

const image1src=require（`../assets/images/image1.jpg`）；
类组件{
image1=image1src；//包含image1-4d5678xc0v987654v.jpg
}
//在模板中：

有更简单的吗


ps：我不想自己处理查询参数或自定义名称
pps：我不想通过CSS注入这些文件（我知道当文件被CSS注入时，它是有效的）
购买力平价：在我的案例中，使用PWA不是一种选择

谢谢
您正在使用angular cli吗？
查看本文，它解释了如何使用angular cli管理资产：

其他解决方案是使用css，例如：
背景：url（'../assets/fonts/roboto-v15-latin-regular.svg'）
我为此创建了一个管道，因此我不需要像您那样在组件内部创建变量

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
   name: 'imgURL'
})

export class ImgURLPipe implements PipeTransform {

    transform(value: string): string {
        return require('../../../images/' + value); // specify here a correct src to your folder with images
    }

}

要使require在组件或管道内工作，请将其添加到您的打字中：

declare var require: {
<T>(path: string): T;
(paths: string[], callback: (...modules: any[]) => void): void;
ensure: (
    paths: string[],
    callback: (require: <T>(path: string) => T) => void
) => void;
};

声明变量需要：{
（路径：字符串）：T；
（路径：string[]，回调：（…模块：any[]）=>void:void；
确保：(
路径：字符串[]，
回调：（require:（路径：string）=>T）=>void
)=>无效；
};

在模板中，它看起来如下所示：

<img [src]="'myImage.png' | imgURL">



记得在模块中添加管道声明。
谢谢，但你的文章没有帮助。以这种方式复制资产可以完全防止缓存破坏。Css是我提到的一个选项，但我的问题排除了它。