Inconsistent images loading from media picker?

[SandyK-W]

v13 Umbraco Cloud

I have a weird issue where my ArticleImage content doesn’t always load. I’ll do my best to explain it. So we have Articles that each have a required “ArticleImage” media picker. When accessing this from the main listings the image loads consistently, however, accessing it through either the CMS or a carousel of latest articles the image doesn’t load, it just returns null.

Correct load:

Incorrect load:

Code in view:

@if (Model.ArticleImage != null)
{
<img class="main-image" src="@Model.ArticleImage.GetCropUrl(1280,400)" alt="@Model.ArticleImage.Name" />
}```

[jemayn (Jesper Mayntzhusen)]

Can you elaborate on the code for calling the image in the different situations?

[SandyK-W]

Hi Jesper,

The code is always the same as it’s more routing to the view that seems to cause the problem. I’ll see if I can get all of this into this comment:

So we have featured articles which link through with:

<a href="@article.Url()" class="item ga_carousel_item">
    <div class="slide-inner">
        @if (article.MainImage != null)
        {
            <div class="image-container">
                <img src="@article.MainImage.MediaUrl()" width="416" height="292" class="image" alt="@article.MainImage.Name" />
            </div>
        }

        <div class="text">
            <p class="specialism">@(article.SpecialismTaxonomy == null ? String.Empty : article.SpecialismTaxonomy.Name)</p>
            @if (!string.IsNullOrWhiteSpace(article.Name))
            {
                <h3 class="item-title h4">@article.ArticleTitle</h3>
            }

            <p class="article-date"><span>Insights</span> @article.ArticleDate.ToString("dd MMM yyyy")</p>
        </div>
    </div>
</a>

This always displays the image in its preview but using this link makes the image on the article page (as seen in comment 1) null.

the same happens in the featured articles at the top of the listing page:

<a href="@article.Url()" class="article article-type__@typeStyle">
    @if (image != null)
    {
        <div class="image-container">
            <img src="@image.GetCropUrl(620, 350)&format=webp" class="image" alt="@image.GetAltText()" />
        </div>
    }
     <div class="text">
        <p class="article-type">@typeName</p>
        @if (!string.IsNullOrWhiteSpace(article.Name))
        {
            <h3 class="article-title h4">@article.Name</h3>
        }
    </div>
</a>

I can’t get my head around why this nulls the image as if you go through the normal route the image loads, and after that has been loaded the other routes also have the image.

Let me know if I need to post more code or explain more!

[jemayn (Jesper Mayntzhusen)]

So the first part works, and clicking on it triggers the article.Url() which sends you to the article page where it hits snippet 2 and in that one the @image.GetCropUrl(620, 350)&format=webp doesn’t resolve to a url - is that correct?

So you do not see

<div class="image-container">
    <img src="@image.GetCropUrl(620, 350)&format=webp" class="image" alt="@image.GetAltText()" />
</div>

in your markup?

How are you getting the article variable?

[SandyK-W]

Hi So both of these pieces of code function correctly,
The first block is here:

and the second block is this here:

The thing is that using those links to access the ArticlePage view seems to null the image. The cropped image URLs are working for everything correctly and only ArticlePage seems to be having the trouble.

So essentially, accessing the article via the main listing page works fine, image always loads. However, using featured articles, or selected article carousels or even umbraco’s own node link results in no image loading. Honestly I’m baffled XD I appreciate the help looking into it though

Oh I see where I’ve been confusing, it’s only in the ArticlePage.cshtml where the image is tempermental. It works 100% if it is called anywhere else and uses the same methods as the rest of the site, but in other views it’s always 100% working.

[jemayn (Jesper Mayntzhusen)]

It is likely not the image itself that is temperamental but rather either some model casting gone wrong or the Umbraco context not being available in the instances it cannot load.

If you can narrow down when exactly it happens and add some checks for model types in your code you could narrow down if that is the cause or not.

If the Umbraco context can’t be created it is likely something with custom routing setups.

[SandyK-W]

Thanks, I’ll do some investigating today and see what it might be. I hope it’s not caching limits or something weird