Cannot use lasso-image along with lasso-less

[meghakrishnamurthy]

When I setup my page using lasso - everything works great. The page loads up along with stylesheets and javascript.

As soon as I add a <lasso-img> tag on the page, it fails to download any resources and throws this error in the console:-

E15-07-10.18:13:37.514 [ERROR] [unknown_Error] Error &Async fragment failed (lasso-slot:head). Exception: Error: Unable to resolve required module "fs" 
Exception: Error: Module not found: fs 

As soon as I remove the <lasso-img> from the page - it works as expected.

The way I included the lasso configuration is in my config.json with the entries:-

"lasso": {
        "plugins": [
            "optimizer-plugin-inc",
            "lasso-image",
            "lasso-less",
            "lasso-marko"
        ],
        "minify": false,
        "bundlingEnabled": true,
        "resolveCssUrls": true,
        "cacheProfile": "production"
    }

[patrick-steele-idem]

Hi @meghakrishnamurthy, the <lasso-img> tag currently has a limitation that prevents it from being used in templates rendered in the browser (or even transported to the browser). Unfortunately the error message is not helpful. Instead of using the <lasso-img> tag, I recommend using the JavaScript API for the lasso-image plugin to get the image info (including URL, width and height) and pass that data to your template:

var lassoImage = require('lasso-image');
lassoImage.getImageInfo(require.resolve('./my-image.png'), function(err, imageInfo) {
    if (err) {
        // Handle the error
    }

    console.log('URL: ', imageInfo.url);
    console.log('width: ', imageInfo.width);
    console.log('height: ', imageInfo.height);
});

The lasso-image module works on both the server and in the browser. We still need to update the <lasso-img> tag implementation to allow it to work in the browser. Please let us know if the workaround solves your problem. Thanks.