[SalesForce] Images are not displaying in MS Word Doc

I want to display the images into word document and here two types of images are there

  1. Static resource image(not working, in PDF format working)
  2. Rich Text Area(not working, in PDF format is working)

VF Code :

 <apex:page standardController="opportunity"  contentType="application/vnd.msword"  applyHtmlTag="false" showHeader="false" cache="true" readOnly="true" >
<head>
  <style> 
            body { font-family: 'Monotype Corsiva'; }
      @page {
        size:A4 portrait;
        border: 2px double black;    
        }
        table { border-collapse:collapse;}
        th {background-color : orange; color : white;}
        .tdColumn{
                border-bottom:thick solid;
                border-left:thick solid;
                border-top:thick solid;
                border-right:thick solid;
                border-width: 2px;
                border-color: #99CCFF;
                width:50%;
            }
          .tdColumnAlt{
                background: #C9E4FF;
                border-style:solid; 
                border-width: 2px;
                border-color: #99CCFF;
                width:50%;
            }
            .tdColumnAlt2{
                background: #99CCFF;                
                border-style:solid; 
                border-width: 3px;
                border-color: #99CCFF;
                width:50%;
            }
      </style>
    </head>
 <body>
  <center>    
<table>


<tr width = '100%'><td align = 'right' colspan='5'> <apex:image url="{!$Resource.MAW_India_Logo}" width="220" height="55"/> </td></tr>
<tr width = '100%'><td align = 'center' colspan='5'><u>Name of the Wish Child : &nbsp; <apex:outputText value="{!Opportunity.Name}"/></u></td></tr>
<tr><td height='40px'></td> </tr>
<tr width = '100%'>
     <td width = '5%'></td>
    <td width = '40%' valign="top" >
   <table width = '100%'>

        <tr>
           <td class='tdColumn' >Age:</td>
          <td class='tdColumn' ><apex:outputText value="{!FLOOR(Opportunity.Age_As_On_Date__c)}"/></td>
        </tr>
        <tr>
            <td class='tdColumnAlt' >Gender:</td>
             <td class='tdColumnAlt'><apex:outputText value="{!Opportunity.WishChildGender__c}"/></td>
        </tr>
        <tr>
            <td class='tdColumn' >Resident of:</td>
             <td class='tdColumn'><apex:outputText value="{!Opportunity.City__c}"/></td>
        </tr>
        <tr>
            <td class='tdColumnAlt'>Referring Hospital:</td>
             <td class='tdColumnAlt'><apex:outputText value="{!Opportunity.Account.name}"/></td>
        </tr>

     </table>
    </td>
    <td width = '45%' valign="top">
         <table width = '100%'>
        <tr>
            <td class='tdColumn' >Date of Identification:</td>
          <td class='tdColumn' ><apex:outputText value="{0, date, dd.MM.YYYY}">
          <apex:param value="{!Opportunity.Identified_On__c}"/>
            </apex:outputText></td>
        </tr>
        <tr>
            <td class='tdColumnAlt' >Date of Fulfilment:</td>

             <td class='tdColumnAlt' ><apex:outputText value="{0, date, dd.MM.YYYY}">
          <apex:param value="{!Opportunity.CloseDate}"/></apex:outputText></td>
        </tr>
        <tr>
            <td class='tdColumn' >Wish Volunteer:</td>
            <td class='tdColumn' ><apex:outputText value="{!Opportunity.Volunteer__r.name}"/></td>
        </tr>
        <tr>
            <td class='tdColumnAlt'>Wish: &nbsp; <apex:outputText value="{!Opportunity.StageName}"/> </td>
           <td class='tdColumnAlt'><apex:outputText value="{!Opportunity.Wish_Item__c}"/></td>
        </tr>
        </table>
    </td>
    <td width = '5%'></td>
</tr>
<tr><td height='40px'></td> </tr>
<tr width = '100%'>
<td width = '5%'></td>
<td colspan='3'> 
     <table width = '100%'>
        <tr>
            <th  width = '50%'>Wish Story:</th>
            <th  width = '50%'>Wish Photograph:</th>
        </tr>
        <tr>
            <td align = 'left' bgcolor="#C9E4FF"><apex:outputText escape="false" value="{!Opportunity.Wish_Story__c}"/></td>
            <td bgcolor="#C9E4FF"><apex:outputField value="{!Opportunity.Photo_of_Wish_Child__c}" style="width:120; height:120;"/></td>
            </tr>
        </table>
 </td>
 <td width = '5%'></td>
 </tr>

</Table>
</center> 
</body>
</apex:page>

Update: this code for images not displaying

<tr width = '100%'>
  <td align = 'right' colspan='5'> 
    <apex:image url="{!$Resource.MAW_India_Logo}" width="220" height="55"/>     
  </td>
</tr>
  <td align = 'left' bgcolor="#C9E4FF"><apex:outputText escape="false" value="{!Opportunity.Wish_Story__c}"/>
  </td>

Best Answer

Update on Rich text images

Here is the problem unless stored as a document with externally available flag, I do not think you can permit the image to be displayed on a word document.

Read this doc on why static resource images cannot be accessed in a template:

https://help.salesforce.com/apex/HTViewSolution?urlname=Why-images-stored-as-static-resources-cannot-be-seen-in-emails-sent-using-VF-email-templates-1327108316482&language=en_US

The only crazy solution I can think of is

1) Ask the user to upload the image for the rich text field as attachment on the parent object.

2) create a long text field on the parent object ( kill the rich text field) where the user can add his / her comments related to the image.

2) Create a trigger on attachment object which saves the image into a document

3) Once the image is saved as Doc take the doc id that got created and update it on the parent object using a field that is not editable and do not add to the page layout. ( If you have to add multiple images to your template, you may have to do more nasty coding )

4) On your vf page do

Here is a solution that I developed using the advice from these blogs

http://eplatypus.blogspot.com/2012/01/visualforce-to-word.html

https://theviewfromouthere.wordpress.com/2009/10/08/turning-a-visualforce-page-into-a-word-document/

Instead of loading the image into a static resource I loaded it into the document and make sure Externally Available Image is checked.

My page tag:

<apex:page standardController="opportunity"  contentType="application/msword#mydoc.doc" applyHtmlTag="false" showHeader="false" cache="true" readOnly="true" >

I used the following syntax for rendering the image

<img src="https://c.**yourinstance**.content.force.com/servlet/servlet.ImageServer?id=docId&oid=OrgID" />

You can get the above URL by

enter image description here

My word file output :

enter image description here