How to create your own Shortcode with an image in Visual Composer?

Question

WordPress

I need to create an element where there will be 3 description fields and one image.
I figured out how to create shortcodes with text fields, but I can't add an image,
or rather display it on the site. It appears in the admin part, but numbers are displayed instead of the image on the site.
The essence of the question is how to add an image to the shortcode?)
Here is my new shortcode in the code
Now it is without an image.
Connected in Function.php
with this code

// Before VC Init
add_action( 'vc_before_init', 'vc_before_init_actions' );
 
function vc_before_init_actions() {
     
    //.. Code from other Tutorials ..//
 
    // Require new custom Element
    require_once( get_template_directory().'/vc-elements/my-first-custom-element.php' ); }

This is the code of the shortcode itself (no image)

<?php
/*
Element Description: VC Info Box
*/
 
// Element Class 
class vcInfoBox extends WPBakeryShortCode {
     
    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_infobox_mapping' ) );
        add_shortcode( 'vc_infobox', array( $this, 'vc_infobox_html' ) );
    }
     
    // Element Mapping
    public function vc_infobox_mapping() {
         
        // Stop all if VC is not enabled
    if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
    }
         
    // Map the block with vc_map()
    vc_map( 
  
        array(
            'name' => __('VC Infobox', 'text-domain'),
            'base' => 'vc_infobox',
            'description' => __('Another simple VC box', 'text-domain'), 
            'category' => __('Stimul', 'text-domain'),   
            'icon' => get_template_directory_uri().'/inc/image/Logo.png',            
            'params' => array(   
                      
                array(
                    'type' => 'textfield',
                    'holder' => 'h3',
                    'class' => 'title-class',
                    'heading' => __( 'Title', 'text-domain' ),
                    'param_name' => 'title',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Title', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),  
                  
                array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Price', 'text-domain' ),
                    'param_name' => 'price',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ), 
          array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Text desc', 'text-domain' ),
                    'param_name' => 'text',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),
        
        array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'card-button-card',
                    'heading' => __( 'text-Button', 'text-button' ),
                    'param_name' => 'button',
                    'value' => __( 'Default value', 'button-text-domain' ),
                    'description' => __( 'Box button', 'text-button' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ) ,
        
        array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'card-button-URL',
                    'heading' => __( 'URL', 'text-button-URL' ),
                    'param_name' => 'url',
                    'value' => __( 'Default value', 'button-text-domain' ),
                    'description' => __( 'Box button url', 'text-url' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                )
                     
            )
        )
    );                                
                                 
        
    } 
     
     
    // Element HTML
    public function vc_infobox_html( $atts ) {
         
        // Params extraction
    extract(
        shortcode_atts(
            array(
                'title'   => '',
                'text' => '',
        
        'button' => '',
        'price' => '',
        'url' => '',
            ), 
            $atts
        )
    );
     
    // Fill $html var with data
    $html = '
    <div class="vc-infobox-wrap">
     <div class="row">
   <div class="col-md-12">
      <div class="vc-infobox-title">' . $title . '</div></div>
         
       <div class="col-md-6"> <div class="vc-infobox-price">' . $price . '</div>
     <div class="vc-infobox-text">' . $text . '</div></div>
    
    <div class="col-md-6"><div class="vc-infobox-button"><a class="card-button-card" href="' . $url . '">' . $button . '</a></div></div>
     </div>
    </div>';      
     
    return $html;
         
    } 
     
} // End Element Class
 
// Element Class Init
new vcInfoBox();

Answer 1

The numbers are the ID of the image
, the code used to process them
complete code

<?php
/*
Element Description: VC image Box
*/
 
// Element Class 
class vcimageBox extends WPBakeryShortCode {
     
    // Element Init
    function __construct() {
        add_action( 'init', array( $this, 'vc_imagebox_mapping' ) );
        add_shortcode( 'vc_imagebox', array( $this, 'vc_imagebox_html' ) );
    }
     
    // Element Mapping
    public function vc_imagebox_mapping() {
         
        // Stop all if VC is not enabled
    if ( !defined( 'WPB_VC_VERSION' ) ) {
            return;
    }
         
    // Map the block with vc_map()
    vc_map( 
  
        array(
            'name' => __('VC Imagebox', 'text-domain'),
            'base' => 'vc_imagebox',
            'description' => __('Another simple VC box', 'text-domain'), 
            'category' => __('Stimul', 'text-domain'),   
            'icon' => get_template_directory_uri().'/inc/image/Logo.png',            
            'params' => array(   
                      
                array(
                    'type' => 'textfield',
                    'holder' => 'h3',
                    'class' => 'title-class',
                    'heading' => __( 'Title', 'text-domain' ),
                    'param_name' => 'title',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Title', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),  
        
                 array(
                       'type' => 'attach_image',
                       'holder' => 'div',
                       'class' => 'image-class',
                       'heading' => __('Side Image', 'wpcentral'),
             'param_name' => 'image',
                       'description' => __('The Image in the background', 'wpcentral')
                            ),   
              
                array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Price', 'text-domain' ),
                    'param_name' => 'price',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ), 
          array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'text-class',
                    'heading' => __( 'Text desc', 'text-domain' ),
                    'param_name' => 'text',
                    'value' => __( 'Default value', 'text-domain' ),
                    'description' => __( 'Box Text', 'text-domain' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),
        
        array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'card-button-card',
                    'heading' => __( 'text-Button', 'text-button' ),
                    'param_name' => 'button',
                    'value' => __( 'Default value', 'button-text-domain' ),
                    'description' => __( 'Box button', 'text-button' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ) ,
        
        array(
                    'type' => 'textfield',
                    'holder' => 'div',
                    'class' => 'card-button-URL',
                    'heading' => __( 'URL', 'text-button-URL' ),
                    'param_name' => 'url',
                    'value' => __( 'Default value', 'button-text-domain' ),
                    'description' => __( 'Box button url', 'text-url' ),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => 'Custom Group',
                ),
        
        
                     
            )
        )
    );                                
                                 
        
    } 
     
     
    // Element HTML
    public function vc_imagebox_html( $atts ) {
         
        // Params extraction
    extract(
        shortcode_atts(
            array(
                'title'   => '',
                'text' => '',
        
        'button' => '',
        'price' => '',
        'url' => '',
        'image' => '',
            ), 
            $atts
        )
    );
     
   
    $image_url = wp_get_attachment_image_url( $image, 'full' );

    // Fill $html var with data
    $html = '
    <div class="vc-infobox-wrap">
     <div class="row">
   <div class="col-md-12">
      <div class="vc-infobox-title">' . $title . '</div></div>
    
    <div class="image"> ' . $image . '</div>
         <div class="vc-infobox-image"><img src="' . $image_url . '"></div>
       <div class="col-md-6"> <div class="vc-infobox-price">' . $price . '</div>
     <div class="vc-imagebox-text">' . $text . '</div></div>
    
    <div class="col-md-6"><div class="vc-infobox-button"><a class="card-button-card" href="' . $url . '">' . $button . '</a></div></div>
     </div>
    </div>';      
     
    return $html;
         
    } 
     
} // End Element Class
 
// Element Class Init
new vcimageBox();