Thanks jolake, i'm just trying to get my head around getResource API (based it off the ImageLoader example).
So i've defined my index.ts as such
import {IInputs, IOutputs} from "./generated/ManifestTypes";
import { debug } from "util";
const DefaultImageFileName:string = "./img/like.png";
export class ImageResourceExample implements ComponentFramework.StandardControl<IInputs, IOutputs> {
private imgElement:HTMLImageElement;
// PowerApps component framework framework context, "Input Properties" containing the parameters, control metadata and interface functions.
private _context: ComponentFramework.Context<IInputs>;
private _notifyOutputChanged: () => void;
/**
* Empty constructor.
*/
constructor()
{
}
/**
* Used to initialize the control instance. Controls can kick off remote server calls and other initialization actions here.
* Data-set values are not initialized here, use updateView.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to property names defined in the manifest, as well as utility functions.
* @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to be retrieved asynchronously.
* @param state A piece of data that persists in one session for a single user. Can be set at any point in a controls life cycle by calling 'setControlState' in the Mode interface.
* @param container If a control is marked control-type='starndard', it will receive an empty div element within which it can render its content.
*/
public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container:HTMLDivElement)
{
this._context = context;
let imageUrl:string;
// get image resource (see: https://docs.microsoft.com/en-us/powerapps/developer/component-framework/reference/resources/getresource )
this.imgElement = document.createElement("img");
this._context.resources.getResource(DefaultImageFileName, this.setImage.bind(this, false, "png"), this.showError.bind(this));
container.appendChild(this.imgElement);
}
private setImage(shouldUpdateOutput:boolean, fileType: string, fileContent: string): void
{
let imageUrl:string = this.generateImageSrcUrl(fileType, fileContent);
this.imgElement.src=imageUrl;
}
private generateImageSrcUrl(fileType: string, fileContent: string): string
{
return "data:image/" + fileType + ";base64, " + fileContent;
}
private showError(): void
{
}
/**
* Called when any value in the property bag has changed. This includes field values, data-sets, global values such as container height and width, offline status, control metadata values such as label, visible, etc.
* @param context The entire property bag available to control via Context Object; It contains values as set up by the customizer mapped to names defined in the manifest, as well as utility functions
*/
public updateView(context: ComponentFramework.Context<IInputs>): void
{
// Add code to update control view
}
/**
* It is called by the framework prior to a control receiving new data.
* @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
*/
public getOutputs(): IOutputs
{
return {};
}
/**
* Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
* i.e. cancelling any pending remote calls, removing listeners, etc.
*/
public destroy(): void
{
// Add code to cleanup control if necessary
}
}with the manifest like so:
<?xml version="1.0" encoding="utf-8" ?>
<manifest>
<control namespace="ControlsAndrewLy" constructor="ImageResourceExample" version="0.0.1" display-name-key="Image Example" description-key="Example of how to properly use images within PCF controls." control-type="standard">
<!-- property node identifies a specific, configurable piece of data that the control expects from CDS -->
<property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" />
<resources>
<code path="index.ts" order="1"/>
<css path="css/ImageResourceExample.css"/>
<!-- references to images go here -->
<img path="img/like.png"/>
<img path="img/play-button.png"/>
<img path="img/success.png"/>
<img path="img/time.png"/>
</resources>
</control>
</manifest>
And the result is a image element with no SRC.. (comes up blank)
Not sure exactly where i'm going wrong here. Any ideas, sorry pretty new to this.
Cheers
Andrew
