cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Helper I
Helper I

Where to store images in PowerApps Portal?

I edited the header and footer of  my Powerapps Portal app using the source editor so that it matches the header/footer of my organization.  Where do I store the images I need to use?  I see a place to upload css files but nowhere to upload any images I need to use in my website and Googling the question leads me no where.

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Super User II
Super User II

Re: Where to store images in PowerApps Portal?

Hi @Jim01,

 

If you want to store the images inside the CDS you need to use Web Files functionality (see official docs here). In short - you create a Web File record (you need to populate a Website, Parent Page, Partial URL and Publishing State (don't forget to set it to Publish to make available on the portal). After you save the record you need to attach a note to it with your file - image in your case. Then go to Portal Editor and press Sync Configuration to make it available in the portal.

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

View solution in original post

8 REPLIES 8
Highlighted
Super User II
Super User II

Re: Where to store images in PowerApps Portal?

Hi @Jim01,

 

If you want to store the images inside the CDS you need to use Web Files functionality (see official docs here). In short - you create a Web File record (you need to populate a Website, Parent Page, Partial URL and Publishing State (don't forget to set it to Publish to make available on the portal). After you save the record you need to attach a note to it with your file - image in your case. Then go to Portal Editor and press Sync Configuration to make it available in the portal.

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

View solution in original post

Highlighted
Helper I
Helper I

Re: Where to store images in PowerApps Portal?

Thank you for the help, I appreciate it.  So how to I link the picture in the app in the img tag?  If it were a regular app I would have something like this in the HTML:

 

<img src="/img/myImage.png alt="my image">

 

What would I put in the src?

Highlighted
Super User II
Super User II

Re: Where to store images in PowerApps Portal?

When you create a Web File you need to specify your partial URL. For example, you created a web file with partial URL "sample.jpg" under the Parent Page with partial URL "contact-us". To reference this file in the Parent Page you just use <img src="sample.jpg" alt="my image">. To reference this file in the other pages you will need to use the full path of the image including Parent Page  <img src="/contact-us/sample.jpg" alt="my image">.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  

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

Re: Where to store images in PowerApps Portal?

@OOlashyn 

 

So I created a Web file and named it health-logo.png.  For the Website I gave it the Website name.  For Parent page I used Home. For the partial URL I used health-logo.png.  I published it and attached the file via Notes.

 

I then went to the app and clicked Sync Configuration, opened the Source Code Editor and made my img tag look like this:

 

<img src="health-logo.png" alt="business logo>

 

Saved it and browsed the website but the image is still not showing up.

 

When I look at the dev console in Chrome I get the error, "Failed to load resource: the server responded with a status of 404 (Not Found)

 

Any idea what I can look for?

 

 

Highlighted
Super User II
Super User II

Re: Where to store images in PowerApps Portal?

Can you try <img src="/health-logo.png" alt="business logo>? src that starts with "/" means the root folder of the website.

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

Re: Where to store images in PowerApps Portal?

I'm sorry, I should have mentioned that I tried that and I tried  <img src="/Home/health-logo.png" alt="business logo>

Highlighted
Super User II
Super User II

Re: Where to store images in PowerApps Portal?

Hi @Jim01,

 

Sorry for the long reply.

 

I just tested out and everything worked on my Portal. That's what I did:

1. Created a web file where I set Parent Page to Home (which is a root page for my portal), Partial URL to "sample.jpg" and Publishing State to Published.

2. After web file was created I navigated to Notes tab and attach the image file.

3. On the Web Template for the test page I inserted the next line of HTML: 

<img src="/sample.jpg">

4. Navigated to Portal Studio and pressed Sync Configuration.

5. Open a web page and cleared the cache with Ctrl+F5.

 

Outcome - image was shown as expected.

 

Can you try to do the steps in the same order and see if it will help?

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

Re: Where to store images in PowerApps Portal?

@OOlashyn ,

 

Thank you very much but I figured out what the problem was.  I stumbled across it while looking at the FAQ for another problem.  It seems you cannot have an image with a special character in it.  In my case, the image had a "-" in it.  Once I removed it, the image worked properly.

Helpful resources

Announcements
Community Conference

Power Platform Community Conference

Find your favorite faces from the community presenting at the Power Platform Community Conference!

Watch Now

Experience what’s next for Power Apps

See the latest Power Apps innovations, updates, and demos from the Microsoft Business Applications Launch Event.

Power Platform ISV Studio

Power Platform ISV Studio

ISV Studio is designed to become the go-to Power Platform destination for ISV’s to monitor & manage published applications.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Users online (6,441)