How to add custom user avatar in wordpress

I use below code for adding media uploader to user edit profile page WP.
Now, how to use in for show in single.php page? I have an error in single page:

<img src="<br />
<b>Notice</b>:  Array to string conversion in <b>/Applications/MAMP/htdocs/mihansanat/wp-content/themes/mihansanat/single.php</b> on line <b>64</b><br />
Array">

Uploader.js

 /**
 * Theme Options Scripts
 */

jQuery( document ).ready( function() {

    /* WP Media Uploader */
    var _shr_media = true;
    var _orig_send_attachment = wp.media.editor.send.attachment;

    jQuery( '.shr-image' ).click( function() {

        var button = jQuery( this ),
                textbox_id = jQuery( this ).attr( 'data-id' ),
                image_id = jQuery( this ).attr( 'data-src' ),
                _shr_media = true;

        wp.media.editor.send.attachment = function( props, attachment ) {

            if ( _shr_media && ( attachment.type === 'image' ) ) {
                if ( image_id.indexOf( "," ) !== -1 ) {
                    image_id = image_id.split( "," );
                    $image_ids = '';
                    jQuery.each( image_id, function( key, value ) {
                        if ( $image_ids )
                            $image_ids = $image_ids + ',#' + value;
                        else
                            $image_ids = '#' + value;
                    } );

                    var current_element = jQuery( $image_ids );
                } else {
                    var current_element = jQuery( '#' + image_id );
                }

                jQuery( '#' + textbox_id ).val( attachment.id );
                                console.log(textbox_id)
                current_element.attr( 'src', attachment.url ).show();
            } else {
                alert( 'Please select a valid image file' );
                return false;
            }
        }

        wp.media.editor.open( button );
        return false;
    } );

} );

function.php

function shr_add_admin_scripts(){

    wp_enqueue_media();
    wp_enqueue_script('shr-uploader', get_stylesheet_directory_uri().'/js/uploader.js', array('jquery'), false, true );
}
add_action('admin_enqueue_scripts', 'shr_add_admin_scripts');
function shr_extra_profile_fields( $user ) {

    $profile_pic = ($user!=='add-new-user') ? get_user_meta($user->ID, 'shr_pic', true): false;

    if( !empty($profile_pic) ){
        $image = wp_get_attachment_image_src( $profile_pic, 'thumbnail' );

    } ?>

    <table class="form-table fh-profile-upload-options">
        <tr>
            <th>
                <label for="image"><?php _e('Main Profile Image', 'shr') ?></label>
            </th>

            <td>
                <input type="button" data-id="shr_image_id" data-src="shr-img" class="button shr-image" name="shr_image" id="shr-image" value="Upload" />
                <input type="hidden" class="button" name="shr_image_id" id="shr_image_id" value="<?php echo !empty($profile_pic) ? $profile_pic : ''; ?>" />
                <img id="shr-img" src="<?php echo !empty($profile_pic) ? $image[0] : ''; ?>" style="<?php echo  empty($profile_pic) ? 'display:none;' :'' ?> max-width: 100px; max-height: 100px;" />
            </td>
        </tr>
    </table><?php

}
add_action( 'show_user_profile', 'shr_extra_profile_fields' );
add_action( 'edit_user_profile', 'shr_extra_profile_fields' );
add_action( 'user_new_form', 'shr_extra_profile_fields' );
function shr_profile_update($user_id){

    if( current_user_can('edit_users') ){
        $profile_pic = empty($_POST['shr_image_id']) ? '' : $_POST['shr_image_id'];
        update_user_meta($user_id, 'shr_pic', $profile_pic);
    }

}
add_action('profile_update', 'shr_profile_update');
add_action('user_register', 'shr_profile_update');

single.php

  <?php
    $author_id=get_the_author_meta('ID');
    $user_meta=get_user_meta( $author_id,  'shr_pic', true);
    $image  =   wp_get_attachment_image_src($user_meta, 'thumbnail');
  ?>
   <img src="<?php echo $image ?>">

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

wp_get_attachment_image_src() returns an array. You want wp_get_attachment_image_url().

$image = wp_get_attachment_image_url($user_meta, 'thumbnail');

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0