Try our conversational search powered by Generative AI!

Image is not rendering correctly when using ContentReference

Vote:
 

Hi,

I am using following code to select image to display on page:

        [CultureSpecific]
        [Display(Name = "Right Sub Menu", GroupName = GroupNames.Properties.Content, Order = 90)]
        [UIHint(UIHint.Image)]
        public virtual ContentReference RightSection { get; set; }

This opensup a popup to select the image, but some times after selecting image it's not displayed imediately, infact a broken image is displayed. But after closing popup & reopening it displayes the selected image, also some times previously uploaded images are not rendered on frontend, but when i upload a new image it renders correctly in frontend. following is the code that i am using in frontend:

<div class="product-menu-alllist">
                        @if (TopItem.RightSection != null)
                        {
                            try
                            {
                                // Get the the MediaData object being rendered
                                var currentContent = !ContentReference.IsNullOrEmpty(TopItem.RightSection)
                                                        ? EPiServer.ServiceLocation.ServiceLocator.Current.GetInstance<EPiServer.IContentLoader>().Get<MediaData>(TopItem.RightSection)
                                                        : null;
                                if (currentContent is ImageFile) // Images should be rendered with an image tag and an alt text
                                {
                                    var image = (ImageFile)currentContent;

                                    <div class="banner-product-header">
                                        <img src="@UrlResolver.Current.GetUrl(image.ContentLink)" alt="@image.Description" class="img-fluid" />
                                    </div>                                    
                                }
                            }
                            catch { }
                        }
                    </div>

Thanks

#217075
Feb 14, 2020 12:07
Vote:
 
#217087
Feb 14, 2020 18:01
Vote:
 

First I would tip on adding allowedtypes on the property so you only can choose images then you do not need to get it and then get the url, that would speed up your site.

Then regarding that is is not visiable I would see if there is any js error that can affect it

And also, do not use GetUrl, use this instead:

@Url.ContentUrl(TopItem.RightSection)
#217105
Feb 17, 2020 6:29
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.