cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
AndrewLyMVP
Level 8

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

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

6 REPLIES 6

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

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
Level: Powered On

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

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
Level 8

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

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.
PowerApps Staff jolake
PowerApps Staff

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

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
Level 8

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

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)

images_issue.PNG

 

Not sure exactly where i'm going wrong here.  Any ideas, sorry pretty new to this.

 

Cheers

 

Andrew

 

PowerApps Staff HemantG
PowerApps Staff

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

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

Helpful resources

Announcements
thirdimage

Power Automate Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

sixthImage

Power Platform World Tour

Find out where you can attend!

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

fifthimage

Microsoft Learn

Learn how to build the business apps that you need.

Top Kudoed Authors (Last 30 Days)
Users online (7,104)