Upload Pictures to Case with Apex

Uploading a picture to a Case programatically is a multi-stage process.

First, you'll need a custom field on the Case with a Data Type of Rich Text Area.  In this example, we have one called Photo__c.

You'll also need the "apex:inputfile" component in you Visual Force code, like so:

  

<table>
  <tr>
    <th>Photo #1 (Optional):</th>
    <td><apex:inputfile filename="{!photoForUploadName}" id="photoForUpload" value="{!photoForUpload}"></apex:inputfile></td>
  </tr>
  <tr>
    <th>Photo #2 (Optional):</th>
    <td><apex:inputfile filename="{!photoForUploadName2}" id="photoForUpload2" value="{!photoForUpload2}"></apex:inputfile></td>
  </tr>
</table>

You will also need a Document Folder to use for storing the images (in this example, we use "QAPhotos").

Please note in the code the comments regarding the imageURL

Your apex code will first up save the image to your chosen folder in your Documents object.  It will then based on the newly generated id and create an html string using references to your images as the scr attribute in an img tag:

  
<br>
    public Blob photoForUpload { get; set; }
    public String photoForUploadName { get; set; }
    
    public Blob photoForUpload2 { get; set; }
    public String photoForUploadName2 { get; set; }

    public PageReference createCase() {

               Folder QAPhotosFolder = [Select Id From Folder where Name = 'QAPhotos'];
        
               if(photoForUpload != null){
                    System.Debug('photoForUploadName: ' + photoForUploadName);
                    String photoExtension = photoForUploadName.substring( photoForUploadName.lastindexof('.')+1);
                    System.Debug('photoExtension : ' + photoExtension );
                    Document d= new Document();
                    d.name = 'Photo: ' + photoForUploadName ;
                    d.body=photoForUpload ; // body field in document object which holds the file.
                    d.folderid= QAPhotosFolder.Id;  //folderid where the document will be stored insert d;
                    d.IsPublic = true;
                    d.contenttype='image/' + photoExtension ;
                    d.type= photoExtension ;
                    insert d;
                    /* 
                       Label.Global_DocBaseURL is a label being used as a Global Variable
                       The value of oid will depend on your instance.
                       Open an image in you Documents, to see what your url and oid should be
                       We are using the value: https://c.cs9.content.force.com/servlet/servlet.ImageServer?id={DocumentId}&oid=00DX000000X51xX
                    */
                    String imageURL = Label.Global_DocBaseURL.replace('{DocumentId}',d.id);
                    c.Photo__c = 'Photo 1: <br/><img src="' + imageURL + '"></img>' ;
                }
                
                if(photoForUpload != null){
                    String photoExtension = photoForUploadName2.substring( photoForUploadName2.lastindexof('.')+1);
                    Document d= new Document();
                    d.name = 'Photo: ' + photoForUploadName2 ;
                    d.body=photoForUpload2 ; // body field in document object which holds the file.
                    d.folderid= QAPhotosFolder.Id;  //folderid where the document will be stored insert d;
                    d.IsPublic = true;
                    d.contenttype='image/' + photoExtension ;
                    d.type= photoExtension ;
                    insert d;
                    
                    String imageURL = Label.Global_DocBaseURL.replace('{DocumentId}',d.id);
                    c.Photo__c = c.Photo__c + '<br/><br/>Photo 2: <br/><img src="' + imageURL + '"></img>' ;
                }

                // Insert the case
                INSERT c;
        
    }