0

This is my JS File code

define([
    'uiComponent'
], function (Component) {
    'use strict';
    var some_products = window.checkoutConfig.my_specificProducts;
    return Component.extend({
        defaults: {
            template: 'Vendor_Module/checkout/shipping/additional-block'
        },
        someProducts: some_products
    });

});

This is my template file code

<table>
    <thead>
    <tr><th>Name</th><th>Sku</th><th>ImagePath</th><th>Image</th></tr>
    </thead>
    <tbody data-bind="foreach: someProducts">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: sku"></td>
        <td data-bind="text: image"></td>

        <td> <img  data-bind="attr: { src: '/pub/media/catalog/product'+image, alt: not found }"></td>

    </tr>
    </tbody>
</table>

The output on the checkout page is

enter image description here

Image is not displaying as you can see in screenshot

data-bind="attr: { src: 'pub/media/catalog/product/'+image(), alt: not found }"  and also try **../pub/** or **~/pub**  But not work . 

Can anyone guide me how to concatenate static path with product dynamic path which will show image on checkout page?

Thanks in advance!

3

You may try to update your js component and template as given below.

Please Note:

I used checkoutConfig.staticBaseUrl to get static base URL and the replace "pub/static" from the URL to get the base URL.

we can use any other approach to the base URL of your web site.

step 1) JS File code

define([
    'uiComponent'
], function (Component) {
    'use strict';
    var some_products = window.checkoutConfig.my_specificProducts;

    var baseUrl =  checkoutConfig.staticBaseUrl
    baseUrl = baseUrl.replace("pub/static/",''); 

    return Component.extend({
        defaults: {
            template: 'Vendor_Module/checkout/shipping/additional-block'
        },
        someProducts: some_products,
        getImagepath: function(productimage){               
            return baseUrl + productimage;
        }
    });

});

step 2) Template File code

<table>
    <thead>
    <tr><th>Name</th><th>Sku</th><th>ImagePath</th><th>Image</th></tr>
    </thead>
    <tbody data-bind="foreach: someProducts">
    <tr>
        <td data-bind="text: name"></td>
        <td data-bind="text: sku"></td>
        <td data-bind="text: image"></td>

        <td> <img  data-bind="attr: { src: $parent.getImagepath(image) alt: not found }"></td>

    </tr>
    </tbody>
</table>
1
  • Yes Perfect it return absolute path of Product Image using var baseUrl = checkoutConfig.staticBaseUrl; baseUrl = baseUrl.replace(baseUrl,'../pub/media/catalog/product');
    – HaFiz Umer
    Oct 17 '19 at 6:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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