getAssetPath not returning correct path

[bjolletz]

Stencil version:

@stencil/core@1.9.2

I'm submitting a:

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

Current behavior:
Using Local assets exactly as described in the documentation (https://stenciljs.com/docs/local-assets) is not working when including a Stencil Component in an external application.

The assets dir ends up in the directory dist/<component-name>/assets. But when using getAssetPath, it will return the directory dist/assets/ which will make loading of the resources in the assets directory fail.

Either the assets are not copied to the correct destination or getAssetPath is not returning the correct directory.

Expected behavior:
getAssetPath should return the path to the asset directory.

Steps to reproduce:
I've created a simple test project to illustrate the problem:

https://github.com/bjolletz/stencil-getassetpath-test

It is generated from npm init stencil and then I've added a stencil-asset component, exactly as it is documented here: https://stenciljs.com/docs/local-assets

To reproduce the problem:

yarn
yarn build
yarn serveExtPage

If you check the Network tab in the developer tools in your browser, you will see that the resource (sunset.jpg) can not be loaded because of an invalid URL.

Related code:

Here's the stencil-asset component I copied from the documentation.

import { Component, Prop, getAssetPath, h } from '@stencil/core';

@Component({
  tag: 'stencil-asset',
  styleUrl: 'stencil-asset.css',
  assetsDirs: ['assets']
})
export class StencilAsset {

  @Prop() image = "sunset.jpg";

  render() {
   return <img src={getAssetPath(`./assets/${this.image}`)} />
  }
}

Other information:

[SebasBaezCode]

I use "Copy"
{ type: 'www', copy: [ { src: 'assets', dest: 'build/assets' } -> This copy my assets folder in to build ], }

[GLoganDR]

I use "Copy"
{ type: 'www', copy: [ { src: 'assets', dest: 'build/assets' } -> This copy my assets folder in to build ], }

Can you expand on how you do that? Even when I use copy, the assets are not there in the npm module once it's built. I mean, they're there, but it appears that the path is incorrect in the code, because I don't have fonts or icons available in the component when I use it in a Gatsby site.

[cam-narzt]

getAssetPath also does not take into account the baseUrl in the stencil config.

[arvindanta]

Hi, Any Updates to this ?

[tspringborg]

This is a major showstopper, unfortunately.

[muhammadawais93]

I'm using stencilJs with integration with vue js in the mono-repo structure. you have to setAssetPath in your host app, see the link.
https://developers.arcgis.com/calcite-design-system/get-started/#custom-elements

I hope this explanation will help as well https://stenciljs.com/docs/custom-elements#making-assets-available