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

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

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

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">

记住要在模块中添加管道声明。