You can add or get an image URL 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 set a dynamic image from the theme or module’s web folder in the checkout page or any location that contains code render as knockout, 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,
<img data-bind="attr: { src: require.toUrl('images/abc.png') }" />
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,
<img data-bind="attr: { src: require.toUrl('Magento_Checkout/images/abc.png') }" />
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.