AddImageLogotoPaymentMethodinCheckout

checkmo-method.js

define(
    [
        'Magento_OfflinePayments/js/view/payment/method-renderer/checkmo-method'
    ],
    function (Component) {
        'use strict';
        return Component.extend({
            defaults: {
                template: 'MageVision_Blog67/payment/checkmo'
            },
            /**
             * Get payment method Logo.
             */
            getLogo: function () {
                return window.checkoutConfig.payment.logo[this.item.method];
            },
            /**
             * Display Title next to Logo
             */
            displayTitleLogo: function () {
                return window.checkoutConfig.payment.display_logo_title[this.item.method];
            }
        });
    }
);

checkmo.html

<div class="payment-method" data-bind="css: {'_active': (getCode() == isChecked())}">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               data-bind="attr: {'id': getCode()}, value: getCode(), checked: isChecked, click: selectPaymentMethod, visible: isRadioButtonVisible()"/>
        <!-- ko ifnot: getLogo() -->
            <label data-bind="attr: {'for': getCode()}" class="label"><span data-bind="text: getTitle()"></span></label>
        <!-- /ko -->
        <!-- ko if: getLogo() -->
        <label data-bind="attr: {'for': getCode()}" class="label"><img class="payment-icon" data-bind="attr: {'src': getLogo() , 'alt': getTitle()}"/>
            <!-- ko if: displayTitleLogo() -->
            <span data-bind="text: getTitle()"></span>
            <!-- /ko -->
        </label>
        <!-- /ko -->
    </div>
    <div class="payment-method-content">
        <!-- ko foreach: getRegion('messages') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!--/ko-->
        <div class="payment-method-billing-address">
            <!-- ko foreach: $parent.getRegion(getBillingAddressFormName()) -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <!-- ko if: getMailingAddress() || getPayableTo() -->
        <dl class="items check payable">
            <!-- ko if: getPayableTo() -->
            <dt class="title"><!-- ko i18n: 'Make Check payable to:' --><!-- /ko --></dt>
            <dd class="content"><!-- ko text: getPayableTo() --><!-- /ko --></dd>
            <!-- /ko -->
            <!-- ko if: getMailingAddress() -->
            <dt class="title"><!-- ko i18n: 'Send Check to:' --><!-- /ko --></dt>
            <dd class="content">
                <address class="checkmo mailing address" data-bind="html: getMailingAddress()"></address>
            </dd>
            <!-- /ko -->
        </dl>
        <!-- /ko -->
        <div class="checkout-agreements-block">
            <!-- ko foreach: $parent.getRegion('before-place-order') -->
                <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
        </div>
        <div class="actions-toolbar">
            <div class="primary">
                <button class="action primary checkout"
                        type="submit"
                        data-bind="
                        click: placeOrder,
                        attr: {title: $t('Place Order')},
                        css: {disabled: !isPlaceOrderActionAllowed()},
                        enable: (getCode() == isChecked())
                        "
                        disabled>
                    <span data-bind="i18n: 'Place Order'"></span>
                </button>
            </div>
        </div>
    </div>
</div>

Checkmo.php

<?php

namespace MageVision\Blog67\Model;

use Magento\Framework\Api\AttributeValueFactory;
use Magento\Framework\Api\ExtensionAttributesFactory;
use Magento\Framework\App\Config\ScopeConfigInterface;
use Magento\Framework\Model\Context;
use Magento\Framework\Registry;
use Magento\Framework\UrlInterface;
use Magento\Payment\Helper\Data;
use Magento\Payment\Model\Method\Logger;
use Magento\Store\Model\StoreManagerInterface;

class Checkmo extends \Magento\OfflinePayments\Model\Checkmo
{
    const LOGO_DIR = 'payments/logo/';

    /**
     * Store manager
     *
     * @var StoreManagerInterface
     */
    protected $storeManager;

    /**
     * @param Context $context
     * @param Registry $registry
     * @param ExtensionAttributesFactory $extensionFactory
     * @param AttributeValueFactory $customAttributeFactory
     * @param Data $paymentData
     * @param ScopeConfigInterface $scopeConfig
     * @param Logger $logger
     * @param StoreManagerInterface $storeManager
     */
    public function __construct(
        Context $context,
        Registry $registry,
        ExtensionAttributesFactory $extensionFactory,
        AttributeValueFactory $customAttributeFactory,
        Data $paymentData,
        ScopeConfigInterface $scopeConfig,
        Logger $logger,
        StoreManagerInterface $storeManager
    ) {
        parent::__construct(
            $context,
            $registry,
            $extensionFactory,
            $customAttributeFactory,
            $paymentData,
            $scopeConfig,
            $logger
        );
        $this->storeManager = $storeManager;
    }

    /**
     * Get logo image from config
     *
     * @throws \Magento\Framework\Exception\NoSuchEntityException
     *
     * @return string
     */
    public function getLogo()
    {
        $logoUrl = false;

        if ($file = trim($this->getConfigData('logo'))) {
            $fileUrl = self::LOGO_DIR . $file;
            $mediaUrl = $this->storeManager->getStore()->getBaseUrl(UrlInterface::URL_TYPE_MEDIA);
            $logoUrl = $mediaUrl . $fileUrl;
        }

        return $logoUrl;
    }

    /**
     * Display Title next to Logo
     *
     * @return int
     */
    public function displayTitleLogo()
    {
        return (int) $this->getConfigData('display_logo_title');
    }
}

di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\OfflinePayments\Model\Checkmo" type="MageVision\Blog67\Model\Checkmo" />
</config>

LogoConfigProvider.php

<?php

namespace MageVision\Blog67\Model;

use Magento\Checkout\Model\ConfigProviderInterface;
use Magento\Framework\Escaper;
use Magento\Framework\Exception\LocalizedException;
use Magento\OfflinePayments\Model\Checkmo;
use Magento\Payment\Helper\Data as PaymentHelper;
use Magento\Payment\Model\Method\AbstractMethod;

class LogoConfigProvider implements ConfigProviderInterface
{
    /**
     * @var string
     */
    protected $methodCode = Checkmo::PAYMENT_METHOD_CHECKMO_CODE;

    /**
     * @var AbstractMethod
     */
    protected $method;

    /**
     * @var Escaper
     */
    protected $escaper;

    /**
     * @param PaymentHelper $paymentHelper
     * @param Escaper $escaper
     *
     * @throws LocalizedException
     */
    public function __construct(
        PaymentHelper $paymentHelper,
        Escaper $escaper
    ) {
        $this->escaper = $escaper;
        $this->method = $paymentHelper->getMethodInstance($this->methodCode);
    }

    /**
     * {@inheritdoc}
     */
    public function getConfig()
    {
        $config = [];

        if ($this->method->isAvailable()) {
            $config['payment']['logo'][$this->methodCode] = $this->getLogo($this->methodCode);
            $config['payment']['display_logo_title'][$this->methodCode] = $this->method->displayTitleLogo();
        }

        return $config;
    }

    /**
     * Get logo url from config
     *
     * @param string $code
     *
     * @return string
     */
    protected function getLogo($code)
    {
        return nl2br($this->escaper->escapeHtml($this->method->getLogo()));
    }
}

offline-payments.js

define(
    [
        'uiComponent',
        'Magento_Checkout/js/model/payment/renderer-list'
    ],
    function (
        Component,
        rendererList
    ) {
        'use strict';
        rendererList.push(
            {
                type: 'checkmo',
                component: 'MageVision_Blog67/js/view/payment/method-renderer/checkmo-method'
            },
            {
                type: 'banktransfer',
                component: 'Magento_OfflinePayments/js/view/payment/method-renderer/banktransfer-method'
            },
            {
                type: 'cashondelivery',
                component: 'Magento_OfflinePayments/js/view/payment/method-renderer/cashondelivery-method'
            },
            {
                type: 'purchaseorder',
                component: 'Magento_OfflinePayments/js/view/payment/method-renderer/purchaseorder-method'
            }
        );
        /** Add view logic here if needed */
        return Component.extend({});
    }
);

requirejs-config.js

var config = {
    map: {
        '*': {
             'Magento_OfflinePayments/js/view/payment/offline-payments':'MageVision_Blog67/js/view/payment/offline-payments',
        }
    }
};

system.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Config:etc/system_file.xsd">
    <system>
        <section id="payment" translate="label" type="text" sortOrder="400" showInDefault="1" showInWebsite="1" showInStore="1">
            <group id="checkmo" translate="label" type="text" sortOrder="30" showInDefault="1" showInWebsite="1" showInStore="1">
                <field id="logo" translate="label" type="image" sortOrder="15" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Logo</label>
                    <backend_model>Magento\Config\Model\Config\Backend\Image</backend_model>
                    <upload_dir config="system/filesystem/media" scope_info="1">payments/logo</upload_dir>
                    <base_url type="media" scope_info="1">payments/logo</base_url>
                </field>
                <field id="display_logo_title" translate="label" type="select" sortOrder="16" showInDefault="1" showInWebsite="1" showInStore="1">
                    <label>Display Title next to Logo</label>
                    <source_model>Magento\Config\Model\Config\Source\Yesno</source_model>
                </field>
            </group>
        </section>
    </system>
</config>