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

Posted 2023-02-24

【中文标题】在具有缓存哈希处理的角度模板中注入图像/svg/whatever

【英文标题】：Inject image/svg/whatever in an angular template with cache hash handling

【发布时间】：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 不是一种选择

谢谢

【参考方案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">

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