Stencil: Assets inside component are returning 404

[harshabonthu]

Stencil version:

 "@stencil/core": "^0.6.8"

I'm submitting a:
[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

Current behavior:
When I have an assets folder inside src and my component is using an image from this assets folder, after generating dist folder for component and trying to integrate in a static page or any app. I am getting a 404 on the Image

Expected behavior:
We should be able to use the files from assets folder that are included with the stencil component

Steps to reproduce:

• Create assets folder inside src and in component tsx or css use an image from the assets folder.
• Generate the build for this component
• Create an example folder with index.html and copy the dist folder from above into this example folder
• Include the reference to component.js in index.html and component tag
• Serve this example folder using local http server.
• You will notice a 404 for the image that was being using in the component css or html.

Related code:

Sample repo https://github.com/harshabonthu/stencil-assets

Other information:
I see that assets is being copied into dist/Collection folder and not component folder. Based on chrome source tab I don't see the assets folder in dist folder. I tried copying assets folder from dist/collection to dist/mycomponent that didn't work either.
https://cl.ly/0h2n1D3T2S2n

[adamdbradley]

With ionicons we use the publicPath property: https://github.com/ionic-team/ionicons/blob/492c353fc2d2e11979d7d8c69928b4a899f1c44f/src/components/icon/icon.tsx#L17

@jgw96 would you be able to help document this?

[jgw96]

Documented with https://github.com/ionic-team/stencil-site/commit/a6af618ee0a01fad6124deb110ccee2db3d7651d

[jgw96]

@harshabonthu after looking at your repo and our conversation in slack I am going to close this issue for now as I dont think its really a stencil issue, but a path issue. I will clone and take a look at your repo and will re-open an issue if I pinpoint an issue. Thanks for using Stencil!

[harshabonthu]

@adamdbradley This might work for html, but how can we use the image path in css?
I looked at ionicons but Im still struggling to include in html as well. I see publicPath returns /dist/mycomponent/ so where should the image be ? I tried having the target.png or assets/target.png in src/components/my-component similar to ionicons -> src/components/icon (svg) and then render in html as <img src={this.publicPath + 'assets/target.png'} alt="" />
but that was giving an error too.

[harshabonthu]

@jgw96 I've updated the sample repo with publicPath, but the issue remains the same though.

1) Not sure how the path in css can be resolved
2) With the publicPath as well I don't see the assets being copied to dist/mycomponent by default (they are copied to dist/collection) and so the 404 error remain the same.

Please take a look at sample repo when you get a chance and let me know. Thanks.

[jgw96]

Hey @harshabonthu , yep that's the plan, going to take a look at your sample repo. I'll re-open this issue as soon as I can pin-point what is going on.

[joeleduardo]

I have same issue... any news?

[joeleduardo]

My solution was put inside src/componens/my-component assets directory with my svg image, then inside my-component.tsx file set assetsDir: 'assets' and @Prop({ context: 'publicPath'}) private publicPath: string; in this way i can use my svg image in this way:

${this.publicPath}assets/image.svg}/>

i suppose that with sass is possible set publicPath and then used inside CSS

[joeleduardo]

Well i found another detail when use the component via npm install ... inside VueJs App, basically can't get the svg image :(

[daviddietz]

I had the same issue using my stencil component in React. I got around it by defining my own Icon component which renders different SVGs (also components) based on name attribute. Unfortunately, I am also using ionic 4 in my component and I can't use this method for defining the icon inline (or as a global css variable for that matter). For example, I have an and can specify what icon to use "searchIcon={someStringPathToSVG}" but I can't reference an object. :(