Вставить изображение / svg / что угодно в угловой шаблон с обработкой кеша - PullRequest
Новая
       11

Вставить изображение / svg / что угодно в угловой шаблон с обработкой кеша

0 голосов
/ 21 января 2019

Наличие папки ресурсов с:

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

Howвключить его в шаблон HTML (не в файл CSS), чтобы angular / webpack автоматически включал очистку кеша (преобразуя automaticlt assets/images/image1.jpg в assets/images/image1-4d5678xc0v987654v.jpg?). Цель - обработать кеш и обновить его в ближайшее время.КАК МОЖНО СКОРЕЕ, когда существующий файл обновляется.

В веб-пакете я выполнял следующие действия: 

<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 в моем случае не вариант

Спасибо

Ответы [ 2 ]

0 голосов
/ 02 августа 2019

Я создал канал для этого, поэтому мне не нужно создавать переменные внутри компонента, как вы это сделали. 

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
    }

}

Чтобы сделать необходимые работы внутри компонентов или труб, добавьте это к вашим наборам: 

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

Не забудьте добавить объявление канала в ваш модуль.

0 голосов
/ 21 января 2019

вы используете angular-cli? В этой статье рассказывается, как управлять активами с помощью angular-cli: https://kimsereyblog.blogspot.com/2017/09/manage-assets-and-static-files-with.html

Другим решением будет использование CSS, например: background: url ('../ assets / fonts / roboto-v15-latin-normal.svg')

...