This is a straightforward post, need to show an image column? Want for it to render in a nicer way and not just appear into existence after the portal downloads it? Here’s the bit of code you can use.

To add a Image Column to a Power Pages Web Page you just need to add this bit of code, in here I’m using a media card to display image + description on the right:

    <div class="media">
    
    <div class="media-left media-top">
        <img src="{{ result.ff_imagelogo.Url }}"  />
        <br />
    </div>

    <div class="media-body media-middle">
        <h3 class="media-heading" >{{ result.ff_name }}</h3>
    </div>

    </div>

The thing with the image fields though, is that they take longer to load than the other resources on the page. It didn’t look great so I looked around for a way to make this a bit better.

The solution is to hide the component and fade it in when it’s loaded. So change the code above on the <img /> element to the following:

<img src="{{ theme.ff_themelogo.Url }}" class="hidden-img" onload="this.className='fadein-logo'" />

Then include these two classes in your portal theme:

.fadein-logo {
  opacity: 1;
  -webkit-transition: opacity 1s linear;
  transition: opacity 1s linear;
}
.hidden-img {
  opacity: 0;
}

As simple as that, hope this is useful.