Is my code is right to make image shortcode

I am creating my image shortcode but am I doing it the right way or not.

function header_image( $atts ) {
    // [hero-banner img_src="" add_img_class="" alt="" ][/hero-banner]
    $atts = shortcode_atts( 
        array(
            'image_src' => '',
            'alt' => 'my_image',
            'add_img_class' => '',
            'id' => ''
        ), $atts, 'hero-banner'
    );

    // do shortcode actions here
    $output = "<span class=\"dr-banner\">
                <img src=\"".$atts['image_src']."\" class=\"img-responsive ".$atts['add_img_class']."\" alt=\"".$atts['alt']."\" />
            </span>";

    // return html
    return $output;
}
add_shortcode( 'hero-banner','header_image' );

I have a confusion and that is:

$atts is a default value holder and if I want to change the image alt attribute or image source is my code is right or wrong

Solutions Collecting From Web of "Is my code is right to make image shortcode"

Your code is right just need to change $atts variable.

// if you want to add image, alt attribute on shortcode statically
$atts = shortcode_atts( 
    array(
        'image_src' => '',
        'alt' => '',
        'add_img_class' => '',
        'id' => ''
    ), $atts, 'hero-banner'
);


// if you pass image and alt attribute dynamically
$atts = shortcode_atts( 
    array(
        'image_src' => 'dynamic data',
        'alt' => 'dynamic data',
        'add_img_class' => '',
        'id' => ''
    ), $atts, 'hero-banner'
);

It’s used when we are using content with closing dynamic parameter.Please find below example

 function wrap_content_shortcode_callback($atts, $content, $tag){
      $output = '<span style="font-size: 120%;">' . $content . '</span>';
      return $output;
 }
 add_shortcode('wrap_shortcode','wrap_content_shortcode_callback');
 //use shortcode like this: [wrap_shortcode]test123[/wrap_shortcode]