CODEWITHSUNDEEP
knockout.jsknockout-mvc
Jimit Bhavsar
Jimit Bhavsar

Reputation: 118

Onclick bind image using knockout js

I want to show image from allDoorColorStandard.

HTML:

Onclick "color-data" div , i want to update image. In alert i'm getting image URL, now need to bind in image tag.

<div data-bind="foreach: { data: doorColorList, as: 'doorStyleType' }">
    
                <img class="mappimg" width="45" height="45" alt="" data-bind="attr: {src: $parent.mappingImage}" if="$parent.mappingImage">

   
   <div data-bind="foreach: { data: Object.values(doorStyleType.colors.standard) , as: 'allDoorColorStandard' }">  
        <div class="color-data" data-bind="click: $parents[1].selectColor">      
         
            <span class="style-name" data-bind="text: allDoorColorStandard.color_name"></span>
        </div>      
    </div>
    
</div>

JS:

selectColor: function (styleColor,color) {
  alert('kkkk'+styleColor.mapping_image);
  self.mappingImage(styleColor.mapping_image);
},

Any help will be appreciated.

Upvotes: -1

Views: 128

Answers (2)

Dean Duff
Dean Duff

Reputation: 21

Are you receiving any error messages at all? It is a bit difficult to see without seeing the structure of your data/vm. Does the property mappingImage belong to the doorColorList array?

Upvotes: 0

Brother Woodrow
Brother Woodrow

Reputation: 6372

You need to unwrap mappingImage:

<img class="mappimg" width="45" height="45" alt="" data-bind="attr: {src: $parent.mappingImage()}, if:$parent.mappingImage">

Upvotes: 0

Related Questions