How to find img tag in angular 7

Question

How to find image tag in file .I have tried but not working.I do not know how to convert images for my application.

  <img src="./assets/images/test1.png" width="250" height="200">

  <div class="power"></div>

Answer 1

In order to do this, we will need to execute a Node script that will search for any image URL inside the HTML & CSS files using Regex. After that, it will replace these URLs with their Base64 values.

First thing, we need to install these NPM packages that will make our life easier:

npm install replace-in-file --save-dev
npm install datauri --save-dev

We will use the first one to find the images URLs, and the second one to convert the images onto Base64.

After installing these packages, we will create a Node script file contains the following:

const dataUri = require('datauri').sync;
const replace = require('replace-in-file');

const replaceOptions = {
  // Files to search. For now, we need HTML and CSS
  files: ['./dist/LIBRARY_NAME/**/*.js', './dist/LIBRARY_NAME/**/*.html'],
  // Don't search inside these folders / files 
  ignore: [],
  // Search for URLs using this Regex. It supports "./" prefix and the png / jpg files
  from: /\.\/|assets.*\.(png|jpg)/gm,
  // Replace the match with the Base64 value using dataUri
  to: match => { return match === './' ? '': dataUri(match) },
};

replace(replaceOptions)
  .then(results => {
    console.log('Replacement results:', results);
  })
  .catch(error => {
    console.error('Error occurred:', error);
  });

After that, we need to run the script after the build of the library. This can be done by adding this to package.json:

build: "ng build LIBRARY_NAME && node MY_SCRIPT_NAME.js"

Then, you can run the build and script using:

npm run build

---

UPDATE

There is a property you can add it to the ng-package.json to convert the CSS image URLs into Base64

 "lib": {
  "cssUrl": "inline"
 }

More info can be found here.