How to add image in knockout html template file Magento 2?

You can add an image to html (knockout) template to show images at a specific location in the checkout page of Magento 2.

In .html file, if you want to add a dynamic image from the theme or module’s web folder, You can be assigned images using the knockout template with ease.

Simply call the function in src of your image tag, require.toUrl(‘IMAGE_PATH_FROM_WEB_IMAGES_FOLDER’)

You have to keep your image inside your theme or module’s web/images folder.

Like, We want to display images in checkout page .html file, the Image name is abc.png

Keep the image in web/images/abc.png location of your theme or module.

Now you have to add one line in html template to display the image in a page,

Using this method, Your images search for the theme web/images folder.

  • Display Images from Module Web folder,

If you have stored Images in module web folder in your theme Level or Custom module,
app/design/frontend/{Vendor}/{themename}/Magento_Checkout/web/images/abc.png

You have to add module name before image path,

When you see the front page, your images have taken a path from the pub/static folder.

This is the simple way to show images in the knockout html template.