locked
Inline images don't appear in Outlook client when sharing HTML content with it from my WinRT app? RRS feed

  • Question

  • I have a C# WinRT app that is a Share source.  When I try to share HTML content that has inline images with Outlook as the Share target, I don't see the images.  The space for the images is there.  I can tell because the text in the following TD table element is offset the correct distance to the right, just no images.  Why is this happening?

    Note: the Base64 encoded string of the image's JPEG bytes does start with the prefix "/9j" so I assume the encoding is correct.  I have used the JPEG image bytes converted back to WriteableBitmap in several places in my app so I know the stored bytes are valid.

    Here is the relevant code I use to build the HTML table I pass to Outlook:

            private string buildOneVideomarkShareHtml(Videomark vidMark)
            {
                StringBuilder html = new StringBuilder();
    
                html.Append("<table><tbody>");
    
                // ROW 1
                
                html.Append("<tr>");
    
                // ELEMENT: Thumbnail, bytes encoded as a Base64 string.
                html.Append("<td>");
    
                string strThumbBytesBase64 = vidMark.ThumbnailJpegBytes.ToBase64Encoded();
    
                string imgElement =
                    String.Format(
                        "<img src=\"data:image/jpg;base64,{0}\" rowspan=\"2\" height=\"256\" width=\"256\" />" , strThumbBytesBase64);
    
                html.Append(imgElement);
    
                html.Append("</td>");
    
                // ELEMENT: Videmark location, trimmed.
                html.Append("<td>");
    
                string strLocation = 
                        "Location: " + Misc.SecondsToHoursMinutesSecondsString(vidMark.OffsetSecs);
    
                string strLocationElement =
                    String.Format("<p><b>Location:</b> {0}</p>", strLocation);
    
                html.Append(strLocationElement);
                    
                html.Append("</td>");
    
                // Close up Row 1.
                html.Append("</tr>");
    
                // ROW 2
                html.Append("<tr>");
    
                html.Append("<td>");
    
                string strNoteClipped = vidMark.Text.WrapLineAtLastWord(256);
    
                string strNoteElement =
                    String.Format("<p>{0}</p>", strNoteClipped);
    
                html.Append(strNoteElement);
    
                html.Append("</td>");
    
                // Close up Row 2.
                html.Append("</tr>");
    
                // Finish up.
                html.Append("</tbody></table>");
    
                return html.ToString();
            }
    
            /// <summary>
            /// Builds an HTML table from the current videomark contents.
            /// </summary>
            private string buildVideomarksShareHtml()
            {
                if (GetCurrentVideo == null)
                    throw new NullReferenceException("There is no current video.");
    
                // Build an HTML table.
                StringBuilder html = new StringBuilder();
    
                html.Append("<table><tbody>");
    
    
                foreach (Videomark vidMark in GetVideomarksViewModel.VideomarksCollection)
                {
                    // New row.
                    html.Append("<tr>");
    
                    string strOneVideomarkHtml = buildOneVideomarkShareHtml(vidMark);
    
                    html.Append(strOneVideomarkHtml);
    
                    html.Append("</tr>");
                }
    
                html.Append("</tbody></table>");
    
                return html.ToString();
            }
    
            protected override bool GetShareContent(DataRequest request)
            {
                YouTubeVideo currVideo = GetCurrentVideo;
    
                if (currVideo == null)
                    throw new NullReferenceException("There is not current video.");
    
                bool succeeded = false;
    
                string dataPackageHtml = buildVideomarksShareHtml();
    
                if (!String.IsNullOrEmpty(dataPackageHtml))
                {
                    DataPackage requestData = request.Data;
    
                    requestData.Properties.Title = "[Videomarks] " + currVideo.Title.WrapLineAtLastWord(80);
                    requestData.Properties.Description =
                        "Here is an interesting video with links to important locations.";
                    requestData.Properties.ContentSourceApplicationLink = GetApplicationLink(currVideo.VideoId);
    
                    string data = Windows.ApplicationModel.DataTransfer.HtmlFormatHelper.CreateHtmlFormat(dataPackageHtml);
                    request.Data.SetHtmlFormat(data); 
    
                    // requestData.SetText(dataPackageText);
                    succeeded = true;
                }
                else
                {
                    request.FailWithDisplayText("Unable to share the videomarks for the current video.  Please report this error to Android Technologies, Inc.");
                }
    
                return succeeded;
            }


    -- roschler


    • Edited by roschler Wednesday, February 12, 2014 8:45 PM
    Wednesday, February 12, 2014 8:44 PM

Answers

  • Either you're not passing the images along correctly or the client you're connecting to doesn't pay attention to them. Since I don't see any reference to the ResourceMap in your code I suspect it's the former.

    Compare with the behavior you get using the sharing source and target samples to help narrow that down (I believe they handle HTML with embedded images, but check).

    See How to share HTML for example code on sharing an HTML page and including its embedded images in the DataPackage's ResourceMap so they can be referenced from the share target.

    --Rob

    • Marked as answer by roschler Wednesday, February 12, 2014 10:00 PM
    Wednesday, February 12, 2014 8:51 PM
    Moderator

All replies

  • Either you're not passing the images along correctly or the client you're connecting to doesn't pay attention to them. Since I don't see any reference to the ResourceMap in your code I suspect it's the former.

    Compare with the behavior you get using the sharing source and target samples to help narrow that down (I believe they handle HTML with embedded images, but check).

    See How to share HTML for example code on sharing an HTML page and including its embedded images in the DataPackage's ResourceMap so they can be referenced from the share target.

    --Rob

    • Marked as answer by roschler Wednesday, February 12, 2014 10:00 PM
    Wednesday, February 12, 2014 8:51 PM
    Moderator
  • Thank you Rob! It was the lack of a resource map that was the problem.  I just made the necessary changes and it looks great. :)

    -- roschler

    Wednesday, February 12, 2014 10:01 PM