Sp-dev-docs: How to reference in code assets included in package
Category
- [x] 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?
waldekmastykarz
All 5 comments
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.
manishgarg1
on 20 Jan 2018
Thanks for the info @manishgarg1!
waldekmastykarz
on 20 Jan 2018
Hi @waldekmastykarz, will close when it is fixed for custom scripts also.
manishgarg1
on 22 Jan 2018
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.
mpasarin
on 21 May 2018
Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues
msft-github-bot
on 28 Jan 2020
Related issues
qrown
路
3Comments
byrongits
路
3Comments
mikeparkie
路
3Comments
SteIvanov
路
3Comments
bengtmoss
路
3Comments
Most helpful comment
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.