>>Hi everybody,
>>
>>I have a table with 366 rows and 4 picture columns in varbinary(max) along with the name of the file (so 4 columns with picture + 4 columns with file names).
>>
>>I need to display all these pictures in the html table.
>>
>>My question is - after I retrieved my data in binary format for all the rows, what do I need to do to display that data? Do I need to create all these files on the fly?
>>
>>Thanks in advance.
>
>
>By 'create all these files on the fly' do you mean to write them out as disk files on the server so that they can be accessed using standard image tags ?
>If so I don't see much point - you may as well store them as files in the first place......
>
>I guess you have two options:
>(a) embed the image data in the page (as base64) using razor
>(b) serve up the image data from a web api url.
>
>For (a) see :
https://devio.wordpress.com/2011/01/13/embedding-images-in-html-using-c/>
>For (b) see the 'Retrieving Image Files' part of
http://www.codeguru.com/csharp/.net/returning-images-from-asp.net-web-api.htm.
>If you're using angular you could maybe use ng-repeat to make the calls for each row with the right parameters ?
>
>But since you have almost 1500 images on one page I doubt if either will make for a very good user experience....
>Maybe rethink the approach so that some content is only loaded 'on demand' ?
Hi Viv,
Thanks a lot for your suggestion. This is what I wrote yesterday to test today:
<tr ng-repeat="row in dailyCodes" ng-form="formRow">
<td>{{row.monthDay}}</td>
<td>
<input type="text" name="dailyCode1" id="dailyCode1"
class="form-control"
ng-model="row.dailyCode"
ng-maxlength="40" />
<div class="field-validation-error">
<span ng-show="formRow.dailyCode1.$error.maxlength && formRow.dailyCode1.$dirty">
@String.Format(Messages.cannotExceed, Labels.daily + " " + Labels.code + "1", "40")
</span>
</div>
</td>
<td><span ng-if="row.p1Caption!=''"><img
width="16" height="16" alt="{{row.p1caption}}"
src="{{getImageData(row.dailyPict, row.p1Caption);}}" /></span></td>
where getImageData function is
$scope.getImageData = function(rowData, fileName)
{
var ext = fileName.split('.').pop();
if (ext == "ico")
ext = "x-icon";
var result = "data:image/" + ext + ";base64," + rowData;
return result;
}
Does it look OK to you?
I am trying to replicate the form we have in VFP although in that form we didn't display images in the grid.
If it's not broken, fix it until it is.
My Blog