How to add custom image in mini cart?

Question

How to add Custom Image in minicart after the Proceed to Checkout button in minicart magento2

Answer 1

First You Need to override this file in ypur custome theme file:

project/vendor/magento/module-checkout/view/frontend/web/template/minicart/content.html

like this :

project/app/design/frontend/Magento/themename/Magento_Checkout/web/template/minicart/content.html

Please see this file i added image in payment-img div,

<!--
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
-->
<div class="block-title">
<strong>
    <span class="text" translate="'My Cart'"/>
    <span
        class="qty empty"
        text="getCartParam('summary_count')"
        data-bind="css: { empty: !!getCartParam('summary_count') == false },
                   attr: { title: $t('Items in Cart') }">
    </span>
</strong>
</div>

<div class="block-content">
<button type="button"
        id="btn-minicart-close"
        class="action close"
        data-action="close"
        data-bind="attr: { title: $t('Close') }">
    <span translate="'Close'"/>
</button>

<if args="getCartParam('summary_count')">
    <div class="items-total">
        <span class="count" if="maxItemsToDisplay < getCartLineItemsCount()" text="maxItemsToDisplay"/>
        <translate args="'of'" if="maxItemsToDisplay < getCartLineItemsCount()"/>
        <span class="count" text="getCartLineItemsCount()"/>
            <!-- ko if: (getCartLineItemsCount() === 1) -->
                <span translate="'Item in Cart'"/>
            <!--/ko-->
            <!-- ko if: (getCartLineItemsCount() > 1) -->
                <span translate="'Items in Cart'"/>
            <!--/ko-->
    </div>

    <each args="getRegion('subtotalContainer')" render=""/>
    <each args="getRegion('extraInfo')" render=""/>

    <div class="actions" if="getCartParam('possible_onepage_checkout')">
        <div class="primary">
            <button
                    id="top-cart-btn-checkout"
                    type="button"
                    class="action primary checkout"
                    data-action="close"
                    data-bind="
                        attr: {
                            title: $t('Proceed to Checkout')
                        },
                        click: closeMinicart()
                    "
                    translate="'Proceed to Checkout'"
            />
            <div data-bind="html: getCartParam('extra_actions')"></div>
        </div>
    </div>
</if>
<div class="payment-img">
    <img data-bind="attr: { src: require.toUrl('images/name.jpg') }" alt="">
</div>

<if args="getCartParam('summary_count')">
    <strong class="subtitle" translate="'Recently added item(s)'"/>
    <div data-action="scroll" class="minicart-items-wrapper">
        <ol id="mini-cart" class="minicart-items" data-bind="foreach: { data: getCartItems(), as: 'item' }">
            <each args="$parent.getRegion($parent.getItemRenderer(item.product_type))"
                  render="{name: getTemplate(), data: item, afterRender: function() {$parents[1].initSidebar()}}"
            />
        </ol>
    </div>
</if>

<ifnot args="getCartParam('summary_count')">
    <strong class="subtitle empty"
            data-bind="visible: closeSidebar()"
            translate="'You have no items in your shopping cart.'"
    />
    <if args="getCartParam('cart_empty_message')">
        <p class="minicart empty text" text="getCartParam('cart_empty_message')"/>
        <div class="actions">
            <div class="secondary">
                <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
                    <span translate="'View and Edit Cart'"/>
                </a>
            </div>
        </div>
    </if>
</ifnot>

<div class="actions" if="getCartParam('summary_count')">
    <div class="secondary">
        <a class="action viewcart" data-bind="attr: {href: shoppingCartUrl}">
            <span translate="'View and Edit Cart'"/>
        </a>
    </div>
</div>

<div id="minicart-widgets" class="minicart-widgets" if="getRegion('promotion').length">
    <each args="getRegion('promotion')" render=""/>
</div>
</div>
<each args="getRegion('sign-in-popup')" render=""/>

you need to put your image in this folder..

project/app/design/frontend/Magento/themename/web/images