JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/js/select2.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.0/css/select2.min.css">
<select name="" id="" class="ajax-tag-select">
    <option value="foo" data-logo="http://lorempixel.com/100/50">Название</option>
</select>

JavaScript

$(".ajax-tag-select").select2({
    ajax: {
        url: "http://127.0.0.1:8000/blog/tags_list/to_json",
        dataType: 'json',
        delay: 250,
        id: function (obj) {
            return obj.name;
        },
        data: function (params) {
            return {
                q: params.term,
            };
        },
        processResults: function (data, page) {
            var response = JSON.parse(data);
            console.log(response);
            return {
                results: response
            };
        },
        cache: true
    },
    escapeMarkup: function (markup) {
        return markup;
    },
    minimumInputLength: 1,
    maximumSelectionLength: 6,
    templateResult: formatRepo,
    templateSelection: formatRepoSelection,
});

function formatRepo(tag) {
    if (tag.loading) return tag.text;
    return '<span><img src="/media/' + tag.logo + '" class="tag-loaded"/>' + tag.name + '</span>';
}

function formatRepoSelection(tag) {
    if (tag.loading) {
        return tag.text;
    }

    if (tag.element) {
        var $tag = $(tag.element);
        var markup = '<span><img src="' + $tag.data('logo') + '"class="tag-selected"/></span>';
    } else if (tag) {
        var markup = '<span><img src="/media/' + tag.logo + '"class="tag-selected"/></span>';
    }

    return markup || tag.text;
}