1

I'm working on a Magento 2.4.6 project and need to add an image next to the PayPal image in the PayPal module html file. I created a override file and verified that it's working however the image Im trying to add does not show up. I tried retrieving it in a similar fashion to the PayPal image but it's not working. this is the file.

paypal-express-in-context.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="payment-method" css="_active: getCode() == isChecked()" afterRender="initListeners">
    <div class="payment-method-title field choice">
        <input type="radio"
               name="payment[method]"
               class="radio"
               attr="id: getCode()"
               ko-value="getCode()"
               ko-checked="isChecked"
               click="selectPaymentMethod"
               visible="isRadioButtonVisible()"/>
        <label attr="for: getCode()" class="label">
            <!-- PayPal Logo -->
            <img data-bind="attr: { src: getPaymentAcceptanceMarkSrc(), alt: $t('Acceptance Mark') }" class="payment-icon"/>
            <img data-bind="attr: { src: getViewFileUrl('Magento_Paypal::images/venmo_icon.png'), alt: $t('Venmo') }" class="payment-icon" /> <! --line i im trying to add -->
            <!-- PayPal Logo -->
            <span text="getTitle()"></span>
            <a class="action action-help"
               attr="href: getPaymentAcceptanceMarkHref()"
               click="showAcceptanceWindow"
               translate="'What is PayPal?'"></a>
        </label>
    </div>
    <div class="payment-method-content">
        <each args="getRegion('messages')" render=""></each>
        <div class="checkout-agreements-block">
            <each args="$parent.getRegion('before-place-order')" render=""></each>
        </div>
        <div class="actions-toolbar" attr="id: getButtonId()" afterRender="renderPayPalButtons"></div>
        <div class="payment-method-extra-content">
            <each args="$parent.getRegion('paypal-method-extra-content')" render=""></each>
        </div>
    </div>
</div>

I have the image in the themes web/images directory. I also tried a standard HTML style img src to the file's path, but that didn't work either. Any suggestions would be appreciated.

Improve this question

2 Answers 2

Reset to default
1

Since you've declared the image path is in Magento_Paypal::images/venmo_icon.png, you need to add the image in the path: <your theme dir>/Magento_Paypal/web/images/.

For example: app/design/frontend/VendorName/ThemeName/Magento_Paypal/web/images/venmo_icon.png.

Improve this answer
2
  • I had tried that as well and it didn't work, but now I think it's the syntax of the line. I noticed now that it actually breaks the section. When that line is in the code it breaks the functionality of the radio input, if you select PayPal it doesn't do anything whereas, without that line of code, the PayPal section opens so my code must be wrong. In either case, I have a copy of the image in both image directories.
    – atomic-ag
    Commented Jul 21, 2023 at 20:33
  • @atomic-ag Ah, right. The getViewFileUrl function is not available in .html templates, it is only available in .phtml templates. So you can use require.toUrl syntax to get the image src in .html templates.
    – Tu Van
    Commented Jul 22, 2023 at 4:57
1

I was way off, this is how the line of code should look:

<img data-bind="attr: { src: require.toUrl('Magento_Paypal/images/venmo_icon.png'), alt: $t('Venmo') }" class="venmo payment-icon" />
Improve this answer
1
  • Please mark your answer as accepted (the check symbol at the top-left corner of your answer). That indicates your issue is solved and helps others with the same issue find the verified answer easily.
    – Tu Van
    Commented Jul 22, 2023 at 4:58

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.