Is there an example of using Image Resources within PCF control?

[AndrewLyMVP]

Hi all,

A few of us are still having problems referencing internal images within our controls, can anyone provide an example from their manifest file and control file showing how we are suppose to reference it it appropriately?

Cheers

Andrew

[sheldoncopper73]

Hi, 

For using Images, you will have to give image src as shown below

 /webresources/cc_YourNamespace.YourClassName /imgFolder /sampleImg.png, instead of relative path 

and add your image tag in ControlManifest xml file - <img path="img/sampleImg.png" />

[DianaBirkelbach]

I use classNames, and reference the image inside my css (then I could use a relative path).

But I also wonder, what's the right way to go. Until now I've tried to avoid using absolute path since that could cause problems sometimes, and also since it doesn't use the cached version of the webresource (you loose that kind of GUID that's added in the url).

I wonder what's the best practice.

[AndrewLyMVP]

Thanks guys, all good suggestions and I agree not an ideal situation at the moment. Hemant’s aware and hopefully will chime in with his thoughts around best practices.

[jolake]

Hi all,

Currently the only supported method to retrieve your images at runtime is to use the getResource API. This will return your image data in base64 encoding, which can then be used with a "src='data:<file type i.e. image/jpg>;base64, <data>'" pattern. Similarly for CSS image references, the suggestion is to use the same API and create dynamic stylesheets where necessary, or to simply embed the image data directly into a css file.

The method mentioned by sheldoncopper73 may work for certain Model App scenarios, but will likely not work in scenarios such as online, nor will it be supported in any future surfaces that support PCF (i.e. Canvas apps).

We recognize this pattern may not be ideal for all users, and we are actively looking into additional ways for consumers to reference images from their manifest for future PCF iterations

[AndrewLyMVP]

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&colon;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

[HemantG]

Quick Q , does it work in the actual app ( and not test harness) ? I will give it a try if we the weekend . Btw you can try browser debugging in harness too.

Hemant

[PowerMaverick]

Was there any resolution to this? I am facing the same issue. Data string is blank (undefined) when in success method.

[OOlashyn]

Hi All,

This method doesn't work in harness, but works correctly in a real environment. It behaves like this for a really long time.

[HemantG]

1. Direct references to the web resources should not be made via PCF as it breaks the dependencies.

2. You can use getResrouce as pointed above to use the PCF image resources in the product,

3. This is not yet  supported in the test harness and is tracked via internal bug  1680472

hemant