cancel
Showing results for 
Search instead for 
Did you mean: 
Reply

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

10 REPLIES 10
sheldoncopper73
Resolver I
Resolver I

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

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.

 

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.
	 */
	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

 

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

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

 

hemant 

Helpful resources

Announcements
PA User Group

Welcome to the User Group Public Preview

Check out new user group experience and if you are a leader please create your group

secondImage

Demo Extravaganza is Back!

We are excited to announce that Demo Extravaganza for 2021 has started!

MBAS on Demand

Microsoft Business Applications Summit sessions

On-demand access to all the great content presented by the product teams and community members! #MSBizAppsSummit #CommunityRocks

Power Apps June 2021

June Power Apps Community Call

Don't miss the call this month on June 16th - 8a PDT

Users online (38,759)