JSFiddle - React, Tailwind, and code Playground

by air_hadoken

HTML

<script src="http://canjs.com/release/latest/can.jquery.js"></script>
<script id="si" type="text/mustache">
    <smart-image src="player.photoUrl"></smart-image>
</script>

JavaScript

can.Component.extend({
            tag: 'smart-image',
    template: '<img src="{{src}}" alt="{{alt}}">',
            scope: {
                //src: "@",
                alt: '@',
                checkImage: function () {
                    this.image.src = this.src;
                }
            },
            events: {
                init: function () {
                    var me = this;
                    var image = this.scope.image = new Image();
                    image.onload = function () {
                        me.element.css('visibility', 'visible');
                    };
                    image.onerror = function () {
                        me.element.css('visibility', 'hidden');
                    };
                    this.scope.checkImage();
                },
                '{scope} src': function () {
                    this.scope.checkImage();
                }
            }
        });

$(function() {
    var obs = new can.Map({ player : { } });
    can.view("#si", obs, function(frag) { 
        $(document.body).append(frag); 
    } );
    
    setTimeout(function() {
        obs.player.attr(
            "photoUrl",
         "https://developers.google.com/_static/01ad91979d/images/developers-logo.svg"
        );
    }, 3000);
});