I am creating a Visualforce page that creates a report with images. There are 2 objects, Grizz_Report__c(Parent) and (Visit_Report__c(child). Based on the Grizz_Report__c object, it should pull all the visit_reports__c associated and any images attached under notes and attachments on those visit_report__c. I have the page setup to pull all the visit_report__c records just fine, but I can't figure out how to pull the images attached from those visit_report__c records and display them on the report. Any help would be appriciated. Thank you!

This is my VF page:

<apex:page standardController="Grizz_Report__c" sidebar="false" showHeader="false" extensions="FieldTechReportClass" renderAs="pdf">
    <apex:form >
        <h1>
            Field Tech Report Name:<apex:outputField value="{!Grizz_Report__c.Name}"/><br/>
        </h1>
        <h2>
            Week Starting Date: <apex:outputField value="{!Grizz_Report__c.Week_Starting_Date__c}"/><br/>
            Week Ending Date: <apex:outputField value="{!Grizz_Report__c.Week_Ending_Date__c}"/><br/>            
        </h2>    
        <h3>
            Test Program Related: <apex:outputField value="{!Grizz_Report__c.Test_Program_related__c}"/><br/>
        </h3>    
        <br/>
        <br/>
                
            <table width="100%">
                <apex:repeat value="{!Grizz_Report__c.Visit_Reports__r}" var="vr">  
                <tr>
                
                    <th>Activity Type:</th>
                    <th>Reason for Activity:</th>
                    <th>Account:</th>
                    <th>Activity Reoprt Name:</th>
                    <th>Activity Detail:</th>
                    <th>Activity Date:</th>
                    
                </tr>
                <tr>
                
                    <td><apex:outputField value="{!vr.Activity_Type__c}"/></td>
                    <td><apex:outputField value="{!vr.Reason_for_Activity__c}"/></td>
                    <td><apex:outputField value="{!vr.Account__c}"/></td>
                    <td><apex:outputField value="{!vr.Name}"/></td>
                    <td><apex:outputField value="{!vr.Activity_Detail__c}"/></td>
                    <td><apex:outputField value="{!vr.Date__c}"/></td>
                    <tr>
                        <th>Images:</th>
                        <td><apex:image url="{!imageURL}" width="100"/></td>
                    </tr>
                </tr>
                </apex:repeat>
            </table>
    </apex:form>
</apex:page>

This is my class so far. The image will pull from the GrizzReport object but not from the visit report

public class FieldTechReportClass {
    
    String recId;
    public String imageURL {get;set;}
    //public List<Visit_Report__c> visitReport {get;set;}
    //public Grizz_Report__c grizzReport {get;set;}
    
    public FieldTechReportClass(ApexPages.StandardController controller) {
        recId = controller.getId();
        //grizzReport = (grizz_report__c)controller.getRecord();
        //visitReport = [SELECT ID FROM Visit_Report__c WHERE Field_Tech_Report__c =: grizzReport.ID];
    }
        
    public String getFileId() {
        
        imageURL='/servlet/servlet.FileDownload?file=';
        
        //for(visit_report__c visit : visitReport){
            List<Attachment> attachedFiles = [select Id from Attachment where parentId =:recId];
                if(attachedFiles.size() > 0 ) {
                    imageURL = imageURL+attachedFiles[0].Id;              
                }
               
                return imageURL;    
        
    }
}