How to reference in code assets included in package

[waldekmastykarz]

Category

• Question
• Typo
• Bug
• Additional article idea

In SPFx v1.4 we have the ability to include assets in the package. If we were to include anything else than the main web part bundle (images, scripts that we'd like to dynamically load on runtime using SPComponentLoader), how would we refer to it in in code given that the URL is determined during deployment and the standard URL token (HTTPS://SPCLIENTSIDEASSETLIBRARY/) is replaced only in the manifest but not in code?

[manishgarg1]

Hi @waldekmastykarz,

You can include images in your package as follows. For custom scripts we have found a bug in the tooling that we are working on fixing.

Say, in your webpart folder (e.g. src\webparts\helloWorld) you add an 'assets' folder. To that folder you add an image 'myImage.jpg'. In the web part code you can add the following snippet

'
const myImage: string = require('./assets/myImage.jpg');
'
'
(in the html code)
'
<img src='${myImage}' />
'
'

Now run "gulp --production && gulp package-solution --production" and the image file should be included in your package and get deployed to the clientSideAssets library.

[waldekmastykarz]

Thanks for the info @manishgarg1!

[manishgarg1]

Hi @waldekmastykarz, will close when it is fixed for custom scripts also.

[mpasarin]

This has been fixed and will be released in SPFx v1.5.0.
Please re-open the ticket if it re-appears after that release.