Showing results for 
Search instead for 
Did you mean: 

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?





Resolver I
Resolver I


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" />

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.


Kind regards,
Please click "Accept as Solution" if my post answered your question so that others may find it more quickly. If you found this post helpful consider giving it a "Thumbs Up."

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.

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

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.


	 * 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: ) 
		this.imgElement = document.createElement("img");		
		this._context.resources.getResource(DefaultImageFileName, this.setImage.bind(this, false, "png"), this.showError.bind(this));

	private setImage(shouldUpdateOutput:boolean, fileType: string, fileContent: string): void
		let imageUrl:string = this.generateImageSrcUrl(fileType, fileContent);


	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" ?>
  <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" />

      <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"/>

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.






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.


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

Power Maverick | Microsoft Business Application MVP

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.

If you find this post helpful consider marking it as a solution to help others find it.

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



Helpful resources

2022 Release Wave 1 760x460.png

2022 Release Wave 1 Plan

Power Platform release plan for the 2022 release wave 1 describes all new features releasing from April 2022 through September 2022.

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

Users online (1,905)