Concatenate static Image path with KnockoutJS data-bind

Question

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

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!

Answer 1

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>