Displaying an Uploaded Image as a Custom Avatar in WordPress

If you’re trying to get an avatar for a specific user, you probably shouldn’t be using get_the_author_meta() – I’m not sure why you would use that (perhaps you got part of this from another snippet?).

get_avatar() can get the user’s avatar by either ID or email. If the user is logged in, their ID is readily available from get_current_user_id(), so you should probably use that to get the user’s id like so:

$menu_item->title="Welcome" . ' ' . get_avatar( get_current_user_id(), 'medium' );

That doesn’t necessarily mean it will solve your problem. It will correct the issue of attempting to get the avatar, but your question is somewhat incomplete. Are you doing something to filter the get_avatar() result to use your custom image? If not, you’re going to also need to do something similar to the following. Note that I’ve commented a section that you’ll need to work out the details of because you’re using a custom table (or it appears that you are from your image screenshot) with the user’s image file you want to use. You’ll need to be able to query the db to get that value in the section I noted:

add_filter( 'get_avatar', 'my_custom_avatar', 10, 6 );
function my_custom_avatar( $avatar, $id_or_email, $size, $default, $alt, $args ) {
    
    // Get the user by ID or by email
    $user = false;
    if ( is_numeric( $id_or_email ) ) {
        $user = get_user_by( 'id', (int)$id_or_email );
    } else {
        $user = get_user_by( 'email', $id_or_email );    
    }
    // print_r( $user ); // exit();

    if ( $user && is_object( $user ) ) {

        // You need something here to get your user's custom image.
        // Your example is using a custom db table, so you'll need to work
        // out you query to get the right value for the right user ID.
        //Queried profile_details table
        global $wpdb;

        $sql = "SELECT * FROM profile_details WHERE user_id = " . $user->ID;
        // echo $sql; // exit();

        $query_result = $wpdb->get_results( $sql);
        // print_r( $query_result ); // exit();

        $avatar_url = $query_result->avatarUrl;
        // print_r( $avatar_url ); // exit();
        
        if ( $avatar_url ) {
        
            // HTML for the avatar <img> tag.  This is WP default.
            $avatar = sprintf(
                "<img alt="https://wordpress.stackexchange.com/questions/412445/%s" src="https://wordpress.stackexchange.com/questions/412445/%s" class="https://wordpress.stackexchange.com/questions/412445/%s" height="%d" width="%d" %s/>",
                esc_attr( $alt ),
                esc_url( $avatar_url ),
                esc_attr( "avatar avatar-" . $size . " photo" ),                
                (int) $args['height'],
                (int) $args['width'],
                $args['extra_attr']
            );
        }
    }
    return $avatar;
}

UPDATE

I updated the code based on your notes/query. (StackExchange is a Q&A format, not a regular forum, so don’t post your update as an answer unless it’s a different answer from any others)

There are a number of possibilities, so I put possible breakpoints where I would suggest outputting var contents to debug. Use exit() if necessary, but keep in mind that this filter fires any time the avatar is loaded – including for you, so you’ll want to have the test page already loaded.

Here are some notes on the possible problems:

1. The $user object is not loaded based on the passed info (user ID). To removed the possibility of checking it as an object. That possibility is almost nil and was in the original code snippet I had used for a similar custom avatar. I don’t think you need it, so I took that out. There’s a commented out breakpoint so the first thing to check is whether you’re getting a valid user object.
2. Check if the query is valid. I separated the query so you can check that. I took the user object out and concatenated it instead.
3. If things check out good so far, then check the results of the query.