All Images In Website Uploaded After Certain Date Refuse to Load

Question

So I recently "inherited" a website that has developed a strange problem. All images uploaded to the website after a certain date refuse to load, but all older images still load fine. From what I can tell, it's a pretty basic C# MVC website (currently hosted on GoDaddy, ugh). Here's what I've learned so far:

The current code for an image:

@if (!String.IsNullOrEmpty(feature.Graphic))
        {
            <a href="@feature.Url">
                <img src="@(feature.Graphic)?width=620" class="frame" alt="">
            </a>    
        }

This does what it's supposed to. feature.Graphic gets the appropriate URL for the image. So the given webpage would have <img src="bannerpicFeb17.jp?width=620" class="frame" alt=""> and the image refuses to load. However, if I modify the code (either with Firebug or by altering the .cshtml file) to not include the "?width=620" part, the image will load just fine.

I feel it's important to note that images uploaded before that particular date still work completely normally. New images, whether loaded through the web interface for users or through FTP, don't load. So something must have changed in the way that images are handled and I don't know what. There's nothing wrong with the img links in the database that are being delivered to the code as URLs (that I can see). If I strip the ?width=620 part from the src using Firebug, the image loads fine (although obviously the wrong size). If all my images broke at once, that would make more sense to me. But it's only new ones.

Unfortunately, I can't Google this particular style of image resizing easily because you can't Google a question mark. For various reasons outside my control I can't ask the original web dev to explain things to me. Can somebody point me in a direction of what might be going wrong? Or at least tell me what the heck I'm dealing with here so I can do my own research and educate myself? I can't just strip the ?width=x part from the <img> tags, because at different places in the site it uses different sizes. I really don't want to have to redo 40 or 50 pages to use a different method of image resizing.

I'm obviously missing something, and in my typical experience when it's this frustrating it's usually something super simple. I hope you're able to help me out. Thanks in advance.

Answer 1

Run it like this:

@if (!String.IsNullOrEmpty(feature.Graphic))
    {
        <a href="@Html.Raw(feature.Url)">
            <img src="@(Html.Raw(feature.Graphic))?width=620" class="frame" alt="">
        </a>    
    } 

I am suggesting this because you need to render raw strings and when you run it in your way, IIS would encode it.