Angular: importing images as typescript modules

Issue

In React (CRA), the following works: import logo from './logo.png';. However when I try this in Angular (12) I get the error Cannot find module './logo.png' or its corresponding type declarations.

I know the "angular way" is to make use of assets, however this doesn't work for me, since I'm creating an Angular library, which has no assets.

How can I make the above work or what are alternative solutions to solve this?

Solution

I converted the image to a base64 string. However when using this directly in the src I got an warning in the console about something to do with sanitizing.

After some searching, it turns out you need to sanitize your own resource strings using import { DomSanitizer } from '@angular/platform-browser';. Thanks to BASE64 to image angular 2.

Some notes: Use DomSanitizer with care since there could some risks. Make sure the data is trusted.

Answered By - Gilian