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

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

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

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

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

@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

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

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

Highlighted

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

@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

Check out the on demand sessions that are available now!

News & Announcements

Community Blog

Stay up tp date on the latest blogs and activities in the community News & Announcements.

secondImage

Power Platform 2020 release wave 2 plan

Features releasing from October 2020 through March 2021

Community Highlights

Community Highlights

Check out the Power Platform Community Highlights

Users online (11,555)