cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Jim01
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
OOlashyn
Super User
Super User

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

9 REPLIES 9
OOlashyn
Super User
Super User

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

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?

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.

@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?

 

 

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.

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

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.

@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.

solution worked perfect. thanx.

Helpful resources

Announcements
UG GA Amplification 768x460.png

Launching new user group features

Learn how to create your own user groups today!

Community Connections 768x460.jpg

Community & How To Videos

Check out the new Power Platform Community Connections gallery!

M365 768x460.jpg

Microsoft 365 Collaboration Conference | December 7–9, 2021

Join us, in-person, December 7–9 in Las Vegas, for the largest gathering of the Microsoft community in the world.

Users online (2,475)