代码之家 › 专栏 › 技术社区 › Jscti

使用缓存哈希处理在角度模板中注入图像/svg/任何内容

require caching typescript angular html

Jscti · 技术社区 · 6 年前

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

/资源/images/image1.png
/assets/svg/svg1.svg文件

如何将其包含在html模板中(不包含在css文件中),以便使angular/webpack能够自动对其启用缓存破坏(转换automaticallt 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" />

有更简单的吗?

备注:我不想亲自处理查询参数或自定义名称
pps:我不想通过css注入这些文件(而且我知道当文件被css注入时它会工作)
购买力平价:在我的情况下,使用购买力平价不是一个选择

谢谢

1 回复 | 直到 6 年前

gabriela 6 年前

你在使用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')

Berd 5 年前

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

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

在模板中,它如下所示: