在具有缓存哈希处理的角度模板中注入图像/svg/whatever答案

【问题标题】：Inject image/svg/whatever in an angular template with cache hash handling在具有缓存哈希处理的角度模板中注入图像/svg/whatever
【发布时间】：2019-06-14 17:53:45
【问题描述】：

有一个资产文件夹：

/assets/images/image1.png
/assets/svg/svg1.svg

如何将它包含在 HTML 模板中（而不是 CSS 文件），以便 angular/webpack 自动启用缓存清除（将自动将 assets/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" />

有什么更简单的吗？

ps：我不想自己处理查询参数或自定义名称
pps：我不想通过 CSS 注入这些文件（我知道当文件被 css 注入时它会起作用）
ppps：在我的情况下，使用 PWA 不是一种选择

谢谢

【问题讨论】：

标签： html angular typescript caching require

【解决方案1】：

你在使用 angular-cli 吗？查看这篇文章，它解释了如何使用 angular-cli 管理资产：https://kimsereyblog.blogspot.com/2017/09/manage-assets-and-static-files-with.html

其他解决方案是使用 css，例如：背景： url('../assets/fonts/roboto-v15-latin-regular.svg')

【讨论】：

谢谢，但您的文章没有帮助。以这种方式复制资产可以完全防止缓存破坏。 Css 是我提到的一个选项，但我的问题不包括它。

【解决方案2】：

我为此创建了一个管道，因此我不需要像您那样在组件内创建变量。

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

在模板中，它看起来像这样：

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

记得在你的模块中添加管道声明。

【讨论】：