search

lasso-js / lasso

Advanced JavaScript module bundler, asset pipeline and optimizer
582 stars 75 forks source link

<lasso-img> tag failing when src is passed through a variable. #127

Open BloodSaint opened 8 years ago

BloodSaint commented 8 years ago

Using Lasso with Marko + Widgets.

When I use a template data variable to define the src of an image it fails with the error:

raptor-modules-client.js:68 Uncaught Error: Cannot find module "src/images/picture.png" from "/$/lasso/$/lasso-image".

If I explicitly pass the image location into the src attribute then it succeeds and works just fine.

My current set up is basically: Parent:

<div w-bind>
   <child-widget image="src/images/picture.png" >
      Some content
   </child-widget>
</div>

Child:

<div w-bind>
   <lasso-img src="${data.image}"/>
</div>

Both parent and child are stateful widgets.

patrick-steele-idem commented 8 years ago

If you provide a variable for the src attribute then it needs to be the fully resolved file system path to the resource. For example:

var template = require('./template.marko');
var imagePath = require.resolve('src/images/picture.png');

module.exports = function(input, out) {
    template.render({
            image: imagePath
        }, out);
};

Please let me know if that doesn't work for you.

darrenfu commented 7 years ago

@patrick-steele-idem I also met the same issue.

More specifically, Firefox will not recognize CSS content: url(...);. So, we use <lasso-img src='...' alt='...' /> to replace <img class='...' alt='...'>.

Our question is about the path resolution of src attribute. In our cases, the src of <lasso-img/> should be passed through a variable. I want to use global variable defined by $global{}. So, I did some tests to adopt the global variable.

If I call it like this, it works well.

<lasso-img src="/home/ganghuang/i18n/epnportal/src/components/site-header/ebay-logo-stacked.png" alt="Brand"/>
<lasso-img src="./ebay-logo-stacked.png" alt="Brand"/>

If I call it like this, it won't work.

  1. index.marko 
    <lasso-img src="${component.urlPath}" alt="Brand"/>

    component.js

    this.urlPath = "./ebay-logo-stacked.png";

It throws an error:

TypeError: Cannot read property 'url' of undefined
    at /home/ganghuang/i18n/epnportal/node_modules/lasso-image/lasso-image.js:93:61
    at /home/ganghuang/i18n/epnportal/node_modules/raptor-cache/lib/Cache.js:273:24
    at builderCallback (/home/ganghuang/i18n/epnportal/node_modules/raptor-cache/lib/Cache.js:131:25)
    at done (/home/ganghuang/i18n/epnportal/node_modules/lasso/lib/Lasso.js:378:20)
    at doLassoResource (/home/ganghuang/i18n/epnportal/node_modules/lasso/lib/Lasso.js:435:20)
    at /home/ganghuang/i18n/epnportal/node_modules/lasso/lib/Lasso.js:878:21
    at /home/ganghuang/i18n/epnportal/node_modules/raptor-cache/lib/Cache.js:149:30
    at Object.get (/home/ganghuang/i18n/epnportal/node_modules/raptor-cache/lib/MemoryStore.js:14:16)
    at getCacheEntry (/home/ganghuang/i18n/epnportal/node_modules/raptor-cache/lib/Cache.js:77:22)
    at Cache._getCallback (/home/ganghuang/i18n/epnportal/node_modules/raptor-cache/lib/Cache.js:271:9)
    at Cache.get (/home/ganghuang/i18n/epnportal/node_modules/raptor-cache/lib/Cache.js:291:18)
    at Object.getLassoedResource (/home/ganghuang/i18n/epnportal/node_modules/lasso/lib/LassoCache.js:136:43)
    at Lasso.lassoResource (/home/ganghuang/i18n/epnportal/node_modules/lasso/lib/Lasso.js:875:19)
    at work (/home/ganghuang/i18n/epnportal/node_modules/lasso-image/lasso-image.js:92:38)
    at parallel (/home/ganghuang/i18n/epnportal/node_modules/raptor-async/parallel.js:57:21)
    at builder (/home/ganghuang/i18n/epnportal/node_modules/lasso-image/lasso-image.js:111:21)
App stopped unexpectedly

  1. index.marko

    <lasso-img src="${component.urlPath}" alt="Brand"/>

    component.js

    this.urlPath = "/home/ganghuang/i18n/epnportal/src/components/site-header/ebay-logo-stacked.png";

It throws an error:

Uncaught Error: Cannot find module "/home/ganghuang/i18n/epnportal/src/components/site-header/ebay-logo-stacked.png" from "/lasso-image$1.0.11"
    at moduleNotFoundError (index.js:84)
    at requireModule (index.js:434)
    at instanceRequire (index.js:130)
    at Object.exports.getImageInfo (lasso-image-browser.js:9)
    at module.exports (helper-getImageInfo.js:13)
    at render (index.marko.js:120)
    at renderer (renderer.js:183)
    at Component.js:523
    at Object.batchUpdate [as _l] (update-manager.js:88)
dimichgh commented 7 years ago

@darrenfu Can you print out the error at this location? https://github.com/lasso-js/lasso-image/blob/master/lasso-image.js#L93

TomHuang204 commented 7 years ago

@dimichgh The case "TypeError: Cannot read property 'url' of undefined" has been fixed, because if the url is passed through a variable, the "./' means the root path of the whole project.

But if i use the right path, it still has the error: Uncaught Error: Cannot find module "....png" from "/lasso-image$1.0.11" at moduleNotFoundError (index.js:84) at requireModule (index.js:434) at instanceRequire (index.js:130) at Object.exports.getImageInfo (lasso-image-browser.js:9) at module.exports (helper-getImageInfo.js:13) at render (index.marko.js:120) at renderer (renderer.js:183) at Component.js:523 at Object.batchUpdate [as _l] (update-manager.js:88)

darrenfu commented 7 years ago

@dimichgh @TomHuang204 is my team member, he will provide the necessary logs.