Hi So i’m working on building a custom front end post on wordpress in a sense.
People fill in a forminator form and then that post is automatically created as a post in my custom post type. And then the post is assigned to different users so they can access it and everything works fine the porblem is with the image. So one of the form fields is IMG File Upload. And then I want it to be displayed on the custom template i built with this code:

<?php
if (!isset($talent)) {
    return;
}
?>

<div class="talent-card">
    <div class="talent-card-image">
        <?php
        // Get the featured image (thumbnail)
        $headshot_id = get_post_thumbnail_id($talent->ID);
        if ($headshot_id) {
            $headshot_url = wp_get_attachment_image_url($headshot_id, 'full');
        } else {
            // Fallback to the custom field if needed
            $headshot_url = get_field('professional_headshot', $talent->ID);
            if (is_array($headshot_url)) {
                $headshot_url = $headshot_url['url']; // Ensure it's a URL
            }
        }

        if ($headshot_url) {
            echo '<img src="' . esc_url($headshot_url) . '" alt="' . esc_attr(get_field('first_name', $talent->ID) . ' ' . get_field('last_name', $talent->ID)) . '" style="border-radius: 50%; width: 80px; height: 80px; object-fit: cover;">';
        } else {
            echo '<img src="' . esc_url(get_stylesheet_directory_uri()) . '/images/placeholder.png" alt="No Image Available" style="border-radius: 50%; width: 80px; height: 80px; object-fit: cover;">';
        }
        ?>
    </div>
    <div class="talent-card-info">
        <h3><?php echo esc_html(get_field('first_name', $talent->ID) . ' ' . get_field('last_name', $talent->ID)); ?></h3>
        <p class="talent-location"><?php echo esc_html(get_field('location', $talent->ID)); ?></p>

        <div class="talent-skills">
            <?php
            $skills = get_field('skills', $talent->ID);
            if (!empty($skills)) {
                $skills_array = explode(',', $skills);
                echo '<span class="skill-tag">' . esc_html(implode('</span><span class="skill-tag">', array_map('trim', $skills_array))) . '</span>';
            }
            ?>
        </div>

        <p class="talent-description"><?php echo esc_html(get_field('experience', $talent->ID)); ?></p>
        
        <?php if (current_user_can('administrator')) : ?>
            <p class="talent-contact"><strong>Email:</strong> <?php echo esc_html(get_field('email_address', $talent->ID)); ?></p>
            <p class="talent-contact"><strong>Phone:</strong> <?php echo esc_html(get_field('phone_number', $talent->ID)); ?></p>
        <?php endif; ?>

        <a href="<?php echo get_permalink($talent->ID); ?>" class="view-profile">View Profile</a>
    </div>
</div>

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/css/talent-card.css">

so where the problem begins is the image doesn’t show up data is being pulled as a url but the image place is just empty. I think the issue is cause because of the way elementor stores the files i don’t think if forminator converts the images into a url and then maps it to the custom post types.

Here are some images for clarification. enter image description here See everything is pulled except the image and then on the post data the Image URL is available.
enter image description here I have been trying but couldn’t find the issue.

The only thing i can thing of was making sure the mapping is correct and it is.