F# Set a property on ViewBag dynamic object (passing an image) - asp.net-mvc

Question

I tried to use the solution that Tomas Petricek wrote on this website but not for a string but for an image. Unfortunately, it doesn't work. This is my code:
Model:
let ChartModelCumulativePerformance =
let numMths = 60
let trackOfDates numMths = firstDate.AddMonths(numMths)
let trackHF = [for x in 0 .. 59 ->(trackOfDates x, HFReturns.[x])]
let trackBchk = [for x in 0 .. 59 ->(trackOfDates x, BchkReturns.[x])]
Chart.Line(trackHF,Name="Hedge Fund") |> ignore
Chart.Line(trackBchk,Name="Benchmark") |> ignore
let myChart = Chart.Combine(
[Chart.Line(trackHF,Name="Hedge Fund")
Chart.Line(trackBchk,Name="Benchmark")])
myChart.CopyAsBitmap()
member this.CreateCumulativePerformanceGraph() = ChartModelCumulativePerformance
Controller:
let dataChart = res.CreateCumulativePerformanceGraph()
let (?<-) (viewData:ViewDataDictionary) (name:string) (value: Image) = viewData.Add(name, value)
this.ViewData?chartCumulative <- dataChart
this.View("HFAnalysis") :> ActionResult
View
<img src =#ViewBag.chartCumulative height="80" width="80"/ alt="" />
or
<img src =#ViewData["chartCumulative"] height="80" width="80"/ alt="" />
Otherwise, do you know another methodologies? Thank in advance for your help

Answer 1

Ultimately you've got an HTML problem, not an F# problem here.
If you want to put image data directly into the src attribute of an img tag, you have to convert it to a base-64 string and then prefix it with the appropriate meta-data according to the Data URI standard.
I would convert your bitmap to a PNG (to shrink the file size) and then get a byte array for the image and pass it to Convert.ToBase64String. Ultimately you'll end up with something like this:
<img width="80" height="80" src="data:image/png;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7" />

Answer 2

Many thanks Joel !!!!
This is the code for those who would be interested:
Model:
let ChartModelCumulativePerformance =
//... code for building a Chart
let myChart = myChart.CopyAsBitmap()
let ms = new MemoryStream()
let tempVar = myChart.Save(ms,Imaging.ImageFormat.Png)
let imageData = ms.ToArray()
let imageBase64 = Convert.ToBase64String(imageData)
String.Format("data:image/png;base64,{0}", imageBase64)
Controller:
let dataChart = res.CreateCumulativePerformanceGraph()
let (?<-) (viewData:ViewDataDictionary) (name:string) (value: String) = viewData.Add(name, value)
this.ViewData?chartCumulative <- dataChart
this.View("HFAnalysis") :> ActionResult
View: