JSFiddle - React, Tailwind, and code Playground

HTML

Product Images
<table data-bind="foreach: window.viewModel.productsList">
    <tr>
    <td>
    Url: <span data-bind="text: ImageUrl"></span>
    <img src="#" data-bind="attr: { src: ImageUrl }"/>
    </td>
    </tr>    
</table>

JavaScript

var productModel = function () {
    var self = this;
    window.viewModel = self;

    self.productsList = ko.observableArray([]);

    // I would like to get the "ImageGalleryId" id for the current
    // product and create a new "ImageUrl" base on ko.compute below.
    self.productsList.ImageUrl = ko.computed(function () {
           
         var imageId="";
         // returns undefined
		 // var imageId = self.productsList.ImageGalleryId;
		 // returns: self.productsList.ImageGalleryId is not a function
		 // var imageId = self.productsList.ImageGalleryId();

         // Need help **here**
 		 var imageId = self.productsList.ImageGalleryId;
                
         var imagePath = "/Image/GetImage/";
         var imageSize = "/175/175/";
         var url = imagePath + imageId + imageSize;
         //console.log(url);
         return url;

	},self); // end ImageUrl

    // Load data when model is created
    self.dummyCompute = ko.computed(function () {
         // start dummyCompute
         
         //ajax call omitted 
		 var JSONdataFromServer = {
			   "productsList":[
				  {
					 "ProductId":1,
					 "Title":"Product Name",
					 "ImageGalleryId":10,
                     "ImageUrl":"http://example.com"
				  },
                   				  {
					 "ProductId":2,
					 "Title":"Product Name",
					 "ImageGalleryId":11,
                     "ImageUrl":"http://example.com"
				  }
			   ]
			};

		  
         self.productsList(JSONdataFromServer.productsList);
                
         }, self); // end dummyCompute

    };

ko.applyBindings(new productModel());