Display image in html when source are set to url

4 posts, 0 answers
  1. Marcin Grabowski
    Marcin Grabowski avatar
    20 posts
    Member since:
    Nov 2009

    Posted 15 Sep 2012 Link to this post

    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}"  >
    <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>

  2. Petya
    Petya avatar
    973 posts

    Posted 17 Sep 2012 Link to this post

    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,
    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.

  3. DevCraft R3 2016 release webinar banner
  4. Marcin Grabowski
    Marcin Grabowski avatar
    20 posts
    Member since:
    Nov 2009

    Posted 18 Sep 2012 Link to this post

    I tried yours html. I updated one email in db and both images were not displayed. I read now documentation about cross-policy. Give you feedback letter. 

    PS. You tried this html i controls version 2011.3.1116.1040 ?
  5. Marcin Grabowski
    Marcin Grabowski avatar
    20 posts
    Member since:
    Nov 2009

    Posted 18 Sep 2012 Link to this post

    Your example work fine. I just copy html, and in img tag src have \". I change this to " and your picture are displayed. Thanks for help and info about access policy.
Back to Top