Skip to main content

Magento 2 add images in knockout files

If you want to add a dynamic image from the theme or module’s web/images folder, You can be assigned images using the knockout template with ease.
Simply call the function in src of your image tag, require.toUrl(‘web/images’)
Keep the image in web/images/logo.png location of your theme or module.

<img data-bind="attr: { src: require.toUrl('images/pawan.png') }" />

Now simply add above one line in .html template to display the image on your page. 

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


If you want to display Images from specific Module’s Web folder:
If you have images in the module web folder in your theme or Custom module,
app/design/frontend/{Vendor}/{themename}/Magento_Checkout/web/images/logo.png

You have to add module name before image path,

<img data-bind="attr: { src: require.toUrl('Magento_Checkout/images/logo.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.

You can also get the custom or base URL of the store in the KnockoutJS inside .html file for the frontend area.
Using the below code snippet, You can fetch the store required page URL inside .html(web/template) file.

checkout.baseUrl
checkout.checkoutUrl
checkout.customerLoginUrl
checkout.removeItemUrl
checkout.shoppingCartUrl
checkout.updateItemQtyUrl
checkoutConfig.cartUrl
checkoutConfig.checkoutUrl
checkoutConfig.defaultSuccessPageUrl
checkoutConfig.forgotPasswordUrl
checkoutConfig.pageNotFoundUrl
checkoutConfig.registerUrl
checkoutConfig.staticBaseUrl


Using “checkout.baseUrl”, You will get the baseUrl mentioned below.

<a class="action viewcart hompgeurl" data-bind="attr: {href: checkout.baseUrl}"><img data-bind="attr: { src: require.toUrl('images/left-arrow.png') }" /></a>

Labels:

Comments

Post a Comment

Popular posts from this blog

Magento 2 product collection Filtering multi-select attribute values

  If you have multi-select attribute of product like below If you want filter value for this option Use below syntax to get product data: ->addAttributeToFilter('store_model', array('finset' => $params['store_model'])) finset key is used for multiselect attribute filter. $objectManager = \Magento\Framework\App\ObjectManager::getInstance(); $products = $objectManager->get('Magento\Catalog\Model\Product')         ->getCollection()         ->addAttributeToSelect('*')         ->addAttributeToSelect('store_brand')         ->addAttributeToSelect('store_model')         ->addAttributeToSelect('store_year')         ->addAttributeToFilter('store_brand', array('finset' => $params['store_brand']))         ->addAttributeToFilter('store_model', array('finset' => $params['store_model']))         ->ad...
6 comments
Read more

Integrity constraint violation: 1052 Column 'created_at' in where clause is ambiguous

When trying to filter sales order grid with From and To dates it was redirecting to dashboard.after that again i tried to open sales order grind it is generating reports in reports file it showing. "Integrity constraint violation: 1052 Column 'created_at' in where clause is ambiguous" means it is finding a another created_at field. because when we adding or joining the other table then it has also a field named as created_at. So below is the  solution for this error. magento that created_at is of the main_table not of my custom table. Find the below code in the sales order grid.php file. $this->addColumn('created_at', array(            'header' => Mage::helper('sales')->__('Purchased On'),             'index' => 'created_at',             'type' => 'datetime',             'width' => '100px',         )); ...
Post a Comment
Read more

What startSetup() and endSetup() methods actually does?

The startSetup() and endSetup() methods are used in setup scripts. They are often at the beginning and the end of an upgrade/install method, like in “upgrade()” method of Magento/Catalog/Setup/UpgradeData.php The question is “do you really need them?” Or does it just “look necessary”? This blog post explores what these functions do and then explains when you do and do not need to use these methods. Let’s see what these methods are doing. First, startSetup(): public function startSetup() {   $this->rawQuery("SET SQL_MODE=''");  $this->rawQuery("SET @OLD_FOREIGN_KEY_CHECKS=@@FOREIGN_KEY_CHECKS, FOREIGN_KEY_CHECKS=0");   $this->rawQuery("SET @OLD_SQL_MODE=@@SQL_MODE, SQL_MODE='NO_AUTO_VALUE_ON_ZERO'");   return $this;  } 1. Disable foreign keys check. It may be necessary in some rare cases (for example, in a case of cyclic references between tables), but it’s not needed in common situations. It even may lead to hiding real problems...
Post a Comment
Read more