Erhalte ich zwei Serveranforderungen für ein Bild, wenn ich das IMG-Tag an zwei Komponenten anschließe?

Question

Ich muss ein Bild auf einer Komponente (die durch <img src="path"> sein wird) herunterladen und es an eine andere Komponente senden. Ich denke, einen Service zu verwenden, um zu kommunizieren und einen <img src="path"> Umbau an die zweite Komponente Schablone anzufügen.

Ich bin mir nicht sicher, was unter der Haube passiert und möchte bestätigen, ob der Browser den IMG erneut herunterlädt, wenn ich das Tag anhange oder weiß, ob das der richtige Weg ist, Bilddaten in Angular zu senden.

Wie kann ich das gleiche Bild an eine andere Komponente weitergeben und sicherstellen, dass ich die Ressource nicht erneut anfordere?

Answer 1

Das Tag img wird vollständig von Ihrem Browser verwaltet, dh Sie haben keine Kontrolle über sein Verhalten.

Das soll gesagt werden, der Browser soll ein Cache-System haben, wenn Sie also zweimal das gleiche Bild anfordern UND die Antwort des Servers ist 304 (Not Modified) der Browser soll den Cache verwenden.

Wenn Sie sicherstellen möchten, dass Sie eine im Cache gespeicherte Bild haben, können Sie Ihre eigene img Verpackung Komponente implementieren, die das Bild GET würde, einen Klecks davon erstellen und es in einer img Komponente injizieren, auf diese Weise Sie den Cache kann Bild Blob selbst in einem dedizierten Service.