Where to store images in PowerApps Portal?

[Jim01]

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.

[OOlashyn · Accepted solution]

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.

[Jim01]

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?

[OOlashyn]

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

[Jim01]

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

[OOlashyn]

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

[Jim01]

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

[OOlashyn]

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?

[Jim01]

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