Shortcode: Images not being returned after explode()

I've created a custom element which extends the WPBakery plugin. This custom element will be an image slider. Users choose how many images they want from the single backend option, and the images will then be exploded (explode()), returning and showing the images - That's the idea anyway.

However, I cannot figure out why my images are not being returned? The surrounding content is being rendered in the front end, but the li, in which the src of these images sit, they're empty. Also, I have three images in chosen in the backend, but on one li is being rendered.

Here is the complete markup:

<?php 
if ( ! defined( 'ABSPATH' ) ) {
    die( '-1' );
}

class vcImageCarousel extends WPBakeryShortCode {

    function __construct() {
        add_action( 'init', array( $this, 'vc_imageCarousel_mapping' ) );
        add_shortcode( 'vc_imageCarousel', array( $this, 'vc_imageCarousel_html' ) );
    }

    vc_map( 
        array(
            'name' => __('Image Carousel', 'text-domain'),
            'base' => 'vc_imageCarousel',
            'description' => __('Image Carousel', 'text-domain'), 
            'params' => array(
                array(
                    'type' => 'attach_images',
                    'heading' => esc_html__("Images"),
                    'param_name' => 'image',
                    'value' => esc_html__(''),
                    'admin_label' => false,
                    'weight' => 0,
                    'group' => __( 'Content', 'my-text-domain' ),
                )  
            )
        )
    );

    public function vc_imageCarousel_html( $atts ) {

        extract(
            shortcode_atts(
                array(
                    'id'                    => '',
                    'class'                 => '',
                ), 
                $atts
            )
        );

        // map background image attributes
        $image = shortcode_atts(
            array(
                'image' => 'image',
            ), 
            $atts 
        );

        $image_ids=explode(',',$image['image']);


        $result = "<div class='imageCarousel'>";
        $result .= "<div class='imageCarousel__container justify-content-center'>";
        $result .= "<ul>";

        foreach( $image_ids as $image_id ){
            $result .='<li>';
            $result .= var_dump($image_id);
            $result .= wp_get_attachment_image_src( $image_id, 'full' );
            $result .='</li>';
        }

        $result .= "</ul>";
        $result .= "</div>";
        $result .= "</div>";

        return $result;


    }

}

new vcImageCarousel(); ?>

A var_dump($image_id) returns string(5) "image".

The var_dump function doesn't return anything but it outputs its result directly to the browser, so the statement $result .= var_dump($image_id); doesn't do anything.

Also there is another problem: the wp_get_attachment_image_src return the boolean value false or an array. So if an array is returned, you would have an array to string implicit conversion, that at least will result in a notice.

As a starter I would suggest to refactor your foreach loop like this:

foreach( $image_ids as $image_id ){
        $result .='<li>';
        $result .= $image_id;
        $attachmentImage = wp_get_attachment_image_src( $image_id, 'full' );
        $result .= $attachmentImage ? $attachmentImage['url'] : '';
        $result .='</li>';
    }