This is a migrated thread and some comments may be shown as answers.

[Solved] Display image in html when source are set to url

3 Answers 225 Views

RichTextBox

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Marcin Grabowski asked on 15 Sep 2012, 12:48 PM

Hi Telerik team.

I need same advice.
I our application i must display emails and implement same functionality from email clients. When i have email in html format and image source are set to link, the image are not display. Its possible display image from link in RTB?

Version that i used currently: 2011.3.1116.1040

Xaml code:

<telerikHtmlProvider:HtmlDataProvider Name="htmlDataProvider" Html="{Binding EmailMessage.Message.MessageText}"

RichTextBox="{Binding ElementName=rtbMessageText}" >

</telerikHtmlProvider:HtmlDataProvider>

<telerik:RadRichTextBox x:Name="rtbMessageText" Margin="4,2,4,4" AcceptsReturn="True"

ScrollViewer.HorizontalScrollBarVisibility="Auto" IsReadOnly="True"

VerticalScrollBarVisibility="Auto" IsSelectionMiniToolBarEnabled="False"

IsSpellCheckingEnabled="False" />

Example email:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta content="text/html; charset=iso-8859-2" http-equiv="Content-Type" /> <title>MM Conferences SA</title> <style type="text/css"

>  body    { background-color: #FFF; margin: 0; padding: 0;  line-height: 150%; border:solid 1px #000;}  td,th    { font-family: Tahoma, Arial, Helvetica, sans-serif; font-size: 11px; color: #fff; line-height:1.6em  }  p    {         margin: 5px 5px 7px 5px;  }  p:link   { text-decoration:none; color: #fff; font-weight: bold;  }  p:visited   { text-decoration: none; color: #fff; font-weight: bold; }  a:hover   { text-decoration: underline; color: #fff; font-weight: bold; }  li    { color: #fff}  a:link    { color: #fff; font-weight: bold; text-decoration: none; border:none }  a:visited   { text-decoration: none; color: #858384; font-weight: bold;border:none  }  a:hover   { text-decoration: underline; color: #858384; font-weight: bold; border:none }  a:active   { text-decoration: none; color: #858384; font-weight: bold;border:none  }  .prelegent  { font-size: 9px; text-align: center;}  td    { padding: 0; }  </

style> </head> <body> <table align="center" bgcolor="#FFFFFF" border="1 px solid black" cellpadding="0" cellspacing="0" style="background-image:url('http://mmcpolska.pl/newsletters/wims_2012/tlo-g.jpg');" width="600px"> <tbody> <tr> <td align="center" valign="top"> <center> <a href="http://mail.freshmail.pl/c/lp5kxlcbol/wmjvvwyi37/" style="color:#fff"> Kliknij, je?li widzisz niepoprawnie zawarto?? tego maila. </a></center> </td> </tr> <tr> <td align="center" valign="top"> <table align="center" bgcolor="#ffffff" cellpadding="0" cellspacing="0" width="600"> <tbody> <tr> <td align="center" colspan="3" valign="top"> <img src="cid:/i/1f62ed907q/qiyczbx36r/head.jpg" /></td> </tr> <tr height="38px" valign="middle"> <td align="center" style="background-color: rgb(0, 0, 0); width: 140px;"> <p style="padding-top: 1px;"> <strong><a href="http://mail.freshmail.pl/c/n9of4zj0sl/wmjvvwyi37/" style="color: rgb(192, 192, 192); text-align:center" target="_blank">BROSZURA </a> </strong></p> </td> <td align="center" style="background-color: rgb(0, 0, 0); width: 140px;"> <p style="padding-top: 1px;"> <strong><a href="http://mail.freshmail.pl/c/502923u6xq/wmjvvwyi37/" style="color: rgb(192, 192, 192);" target="_blank">FORMULARZ </a> </strong></p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" valign="top"> <table align="center" cellpadding="0" cellspacing="0" style="background-image:url('http://mmcpolska.pl/newsletters/wims_2012/tlo-g.jpg');" width="600"> <tbody> <tr> <td align="center" colspan="4"> <p style="font-size:16px;"> <strong>REJESTRACJA OTWARTA DO 13 wrze?nia 2012r. </strong></p> <hr /> </td> </tr> <tr> </tr> <tr> <td colspan="4"> <p> <strong>Prelegenci:</strong></p> <hr /> </td> </tr> <tr> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/m.gaj.jpg" /><br /> <strong>Magdalena Gaj</strong><br /> Prezes<br /> Urz?d Komunikacji Elektronicznej</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/m.olszewska.jpg" /><br /> <strong>Ma?gorzata Olszewska</strong><br /> Podsekretarz Stanu, Ministerstwo Administracji i Cyfryzacji</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/m.rakowski.jpg" /><br /> <strong>Miroslav Rakowski</strong><br /> Prezes Zarz?du<br /> Polska Telefonia Cyfrowa</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/m.gaca.jpg" /><br /> <strong>Mariusz Gaca</strong><br /> Dyrektor Wykonawczy Orange Polska<br /> Prezes Zarz?du PTK Centertel</p> </td> </tr> <tr> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/p.kurczewski.jpg" /><br /> <strong>Przemys?aw Kurczewski</strong><br /> Prezes Zarz?du<br /> EmiTel</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/j.braun.jpg" /><br /> <strong>Juliusz Braun</strong><br /> Prezes Zarz?du<br /> TVP</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/b.monka.jpg" /><br /> <strong>Beata Mo?ka</strong><br /> Prezes Zarz?du<br /> i Dyrektor Generalny<br /> Canal+ Cyfrowy</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/d.libicki.jpg" /><br /> <strong>Dominik Libicki</strong><br /> Prezes Zarz?du<br /> Cyfrowy Polsat</p> </td> </tr> <tr> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/a.sienko.jpg" /><br /> <strong>Anna Sie?ko</strong><br /> Country General Manager,<br /> IBM Polska & Baltics</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/a.dulka.jpg" /><br /> <strong>Andrzej Dulka</strong><br /> Prezes Zarz?du<br /> Alcatel-Lucent Polska</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/i.piecuch.jpg" /><br /> <strong>Ireneusz Piecuch</strong><br /> Partner<br /> CMS Cameron McKenna</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/a.auleytner.jpg" /><br /> <strong>Aleksandra Auleytner</strong><br /> Radca Prawny, Szef Praktyki IT&TMT<br /> Kancelaria Doma?ski Zakrzewski Palinka</p> </td> </tr> <tr> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/t.wroblewski.jpg" /><br /> <strong>Tomasz Wr?blewski</strong><br /> Redaktor Naczelny dziennika Rzeczpospolita, Wiceprezes Zarz?du Presspublica</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/j.nieweglowski.jpg" /><br /> <strong>Jacek Niew?g?owski</strong><br /> Chief Strategy Officer<br /> P4</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/k.kieli.jpg" /><br /> <strong>Katarzyna Kieli</strong><br /> President & Managing Director<br /> Discovery Networks CEMEA</p> </td> <td align="center" valign="top" width="20%"> <p class="prelegent"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/j.brzeczkowski.jpg" /><br /> <strong>Jakub Brzeczkowski</strong><br /> Prezes Zarz?du,<br /> Eutelsat</p> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" valign="top"> <table align="center" cellpadding="0" cellspacing="0" width="600"> <tbody> <tr valign="top"> <td align="center"> <img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/patronaty.jpg" /></td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center" valign="top"> <table align="center" cellpadding="0" cellspacing="0" width="600px;"> <tbody> <tr> <td align="center"> <div style=

"background-image: linear-gradient(bottom, rgb(21,4,2) 10%, rgb(103,4,9) 46%);  background-image: -o-linear-gradient(bottom, rgb(21,4,2) 10%, rgb(103,4,9) 46%);  background-image: -moz-linear-gradient(bottom, rgb(21,4,2) 10%, rgb(103,4,9) 46%);  background-image: -webkit-linear-gradient(bottom, rgb(21,4,2) 10%, rgb(103,4,9) 46%);  background-image: -ms-linear-gradient(bottom, rgb(21,4,2) 10%, rgb(103,4,9) 46%);    background-image: -webkit-gradient(   linear,   left bottom,   left top,   color-stop(0.1, rgb(21,4,2)),   color-stop(0.46, rgb(103,4,9))  );"

> <p align="center" style="font-size:16px;"> <br /> <strong>W</strong>arsaw <strong>I</strong>nternational <strong>M</strong>edia <strong>S</strong>ummit</p> <ul style="text-align:left;"> <li> Plan wdra?ania telewizji cyfrowej w Polsce: plany vs. realia</li> <li

>               Jak budowa?/rozwija? zr?wnowa?ony model p?atnej telewizji w spo?ecze?stwie oczekuj?cym wszystkiego "tu i teraz"?</

li> <li> Nowy wymiar warto?ci dodanej w wysokorozwini?tym biznesie telewizyjnym</li> <li> Kana?y tematyczne - rentowny model biznesowy?</li> <li

>               Cyfryzacja w dystrybucji, cyfryzacja w produkcji - jak nowe technologie zmieniaj? spos?b konsumpcji i oczekiwania widz?w wzgl?dem telewizji?</

li> </ul> </div> <div style=

"background-image: linear-gradient(bottom, rgb(21,4,2) 10%, rgb(8,65,90) 46%);  background-image: -o-linear-gradient(bottom, rgb(21,4,2) 10%, rgb(8,65,90) 46%);  background-image: -moz-linear-gradient(bottom, rgb(21,4,2) 10%, rgb(8,65,90) 46%);  background-image: -webkit-linear-gradient(bottom, rgb(21,4,2) 10%, rgb(8,65,90) 46%);  background-image: -ms-linear-gradient(bottom, rgb(21,4,2) 10%, rgb(8,65,90) 46%);    background-image: -webkit-gradient(   linear,   left bottom,   left top,   color-stop(0.1, rgb(21,4,2)),   color-stop(0.46, rgb(8,65,90))  );"

> <p align="center" style="font-size:16px;"> <br /> <strong>Z</strong>miany w <strong>R</strong>egulacjach i <strong>P</strong>rawie <strong>?</strong>wiata <strong>T</strong>elekomunikacji i <strong>M</strong>edi?w</p> <ul style="text-align:left;"> <li> Nowelizacja ustawy Prawo Telekomunikacyjne - g??wne kierunki zmian</li> <li> Rozszerzony zakres uprawnie? regulatora</li> <li> Zasady zawierania i zmian warunk?w um?w abonenckich</li> <li> Nowe obowi?zki operator?w wzgl?dem konsumenta</li> <li

>               Inwestycje w infrastruktur? z punktu widzenia regulacji prawnych oraz strategii przedsi?biorstw</

li> <li> Nowelizacja ustawy o radiofonii i telewizji</li> </ul> <br /> </div> </td> </tr> <tr> <td> <table bgcolor="#FFFFFF" width="600px"> <tbody> <tr align="center"> <td align="center" width="25%"> <a href="http://mail.freshmail.pl/c/ghgnsuhjx5/wmjvvwyi37/"><img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/face.png" /></a></td> <td align="center" width="25%"> <a href="http://mail.freshmail.pl/c/jxy7g0tve2/wmjvvwyi37/"><img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/twitter2.png" /></a></td> <td align="center" width="25%"> <a href="http://mail.freshmail.pl/c/16rfn2symr/wmjvvwyi37/"><img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/google_plus.png" /></a></td> <td align="center" width="25%"> <a href="http://mail.freshmail.pl/c/yn4kykumzm/wmjvvwyi37/"><img src="http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/youtube.png" /></a></td> </tr> <tr> <td colspan="4"> <hr /> </td> </tr> </tbody> </table> </td> </tr> <tr> <td align="center"> <table align="center" cellpadding="0" cellspacing="0" width="600"> <tbody> <tr> <td colspan="6"> <table align="center" bgcolor="white" cellpadding="0" cellspacing="0" height="150px" width="600"> <tbody> <tr> <td align="center" style="color:black" width="33%"> <strong>Kontakt:</strong><br /> MM Conferences SA<br /> ul. D?uga 44/50<br /> 00-241 Warszawa<br /> tel. +48 22 379 29 00<br /> fax: +48 22 379 29 01<br /> e-mail: <a href="http://mail.freshmail.pl/c/hacic23pne/wmjvvwyi37/" style="color:#666">zgloszenia@mmcpolska.pl</a></td> <td align="center" style="color:black" width="33%"> <strong>Aneta Pernak</strong><br /> Kierownik Projektu<br /> Dzia? Produkcji Projekt?w Strategicznych<br /> tel. +48 22 379 29 18<br /> e-mail: <a href="http://mail.freshmail.pl/c/vuichioagx/wmjvvwyi37/" style="color:#666">a.pernak@mmcpolska.pl</a></td> </tr> </tbody> </table> </td> </tr> <tr> <td colspan="6" style="background-color: rgb(0, 0, 0);"> <p style="color: rgb(192, 192, 192);"

>                 Niniejszy e-mail jest biuletynem informacyjnym, przesy?anym do klient?w MM Conferences SA. Je?eli nie chc? Pa?stwo otrzymywa? kolejnych informacji o organizowanych przez nas wydarzeniach, prosimy klikn?? <

a href="http://mail.freshmail.pl/r/wmjvvwyi37/qiyczbx36r/">tutaj</a>.</p> </td> </tr> <tr align="center" bgcolor="#FFFFFF"> <td align="center" colspan="6" style="color:#000;"> <center> Mailing wys?any za pomoc? systemu FreshMail</center> <center> <a href="http://mail.freshmail.pl/c/625h0t0f3n/wmjvvwyi37/" target="_blank"> <img align="middle" border="0" src="cid:/i/1f62ed907q/qiyczbx36r/fm.gif" /></a></center> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> </td> </tr> </tbody> </table> <p> </p> <img src="http://mail.freshmail.pl/o/qiyczbx36r/wmjvvwyi37/" /></body> </html>

3 Answers, 1 is accepted

answered on 17 Sep 2012, 02:18 PM

Hi Marcin,

The issue you are observing seems related to the restrictive cross-domain policy of the server, where your pictures are located. I tried binding the HtmlDataProvider to the following HTML:

<html><head></head><body><p>This is a paragraph!</p><img src=\"http://image.freshmail.pl/i/1f62ed907q/qiyczbx36r/patronaty.jpg\" /><br/><img src=\"http://romeo.roy.free.fr/photos/Maroc1/IMG_0930-1600.jpg\" /></body></html>

where I took the source for the first image from your code, and for the second from a site that has a permissive cross-domain policy. As you can see yourseft, if you try it, this results in only the second image showing.

These two articles - here and here, can help you in understanding this issue. Also, you can check this forum thread.

I hope this is helpful!

Kind regards,
Petya
the Telerik team

Time to cast your vote for Telerik! Tell DevPro Connections and Windows IT Pro why Telerik is your choice. Telerik is nominated in a total of 25 categories.