CODEWITHSUNDEEP
knockout.jspathstaticconcatenation
HaFiz Umer
HaFiz Umer

Reputation: 177

concatenate static Image path with knockoutJs data-bind

This is my JS Code :

define([
    'uiComponent'
], function (Component) {
    'use strict';
    // var show_hide_custom_blockConfig = window.checkoutConfig.quoteData.entity_id;
    var up_selling_products = window.checkoutConfig.up_selling_product.up_selling_product;


    return Component.extend({
        defaults: {
            template: 'MyModule/checkout/shipping/additional-block'
        },
        upSellingProducts: up_selling_products ,

    });
});

how concatenate static Image path in knockoutJs am using this code

<table>
    <thead>
    <tr><th>Name</th><th>Sku</th><th>ImagePath</th><th>Image</th></tr>
    </thead>
    <tbody data-bind="foreach: upSellingProducts">
    <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 }"></img></td>



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

check output image path not fond and it break loop

enter image description here

td data-bind="text: image"> return the dynamic path of my product but how can concatenate my static path pub/media/catalog/product

in above code data-bind="attr: { src: 'pub/media/catalog/product'+image} not working .

Upvotes: 0

Views: 211

Answers (1)

Sam
Sam

Reputation: 1707

there's a couple of possibilities, you should probably share the js-viewmodel and the content of the img property for us to have a complete picture of the issue at hand.

  • the img tag is a self closing element thus, you'll need to do <img data-bind="" />

  • not sure what is in the 'image' property but usually just the name of the file, then your static path should end with a slash, and maybe even start with one ~/pub/../product/

  • as mentioned in the comments, if the property is an observable you'll need to do ... + image()

Upvotes: 1

Related Questions