Images not showing depending on the URL: with or without dash "/" in the end

Question

Hello mates,

This is really weird. The images of my website are not showing properly. If a add a slash in the end of the url, they show up, otherwise, they don't. Take a look:

This is the link with dash in the end: http://jobbox.com.br/cocoonhealth/insurance/private-health-insurance/

To see the issue, delete the dash in the end…. the images will not show up anymore..

The funny thing is when I look at the html code, is exactly the same. I have some specific routes, but this issues is all over the website.

My routes:

view plaincopy to clipboardprint? public static void RegisterRoutes(RouteCollection routes)
{

// Ignore axd files such as assest, image, sitemap etc  
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");  


routes.MapRoute("ServicesIndex", "services", new { controller = "Service", action = "Index" });  

// Insurance Forms  
routes.MapRoute("InsuranceIndex", "insurance", new { controller = "Service", action = "Insurance" });  
routes.MapRoute("InsuranceForm_Corporate", "insurance/corporate-health-insurance", new { controller = "Service", action = "InsuranceCorporate" });  
routes.MapRoute("InsuranceForm_Life", "insurance/life-insurance", new { controller = "Service", action = "InsuranceLife" });  
routes.MapRoute("InsuranceForm_Private", "insurance/private-health-insurance", new { controller = "Service", action = "InsurancePrivate" });  

// Claim Forms  
routes.MapRoute("ClaimIndex", "claim", new { controller = "Service", action = "Claim" });  
routes.MapRoute("ClaimForm_PersonalInjury", "claim/personal-injury-claim", new { controller = "Service", action = "PersonalInjury" });  

// Surgery Forms  
routes.MapRoute("SurgeryIndex", "surgery", new { controller = "Service", action = "Surgery" });  
routes.MapRoute("SurgeryForm_LaserEye", "surgery/laser-eye-surgery", new { controller = "Service", action = "LaserEye" });  


routes.MapRoute("Cocoon.AboutUs", "about-us", new { controller = "Home", action = "AboutUs" });  
routes.MapRoute("Cocoon.ContactUs", "contact-us", new { controller = "Home", action = "ContactUs" });  

routes.MapRoute("Cocoon.Profile", "profile/{login}", new { controller = "Profile", action = "Index", login = ""  });  

routes.MapRoute(  
    "Default",                                              // Route name  
    "{controller}/{action}/{id}",                           // URL with parameters  
    new { controller = "Home", action = "Index", id = "" }  // Parameter defaults  
);

}

Also, the CSS is working propoerly and it's pointing to the same folder. Do you know what's going on? Thank you again!

Answer 1

One of ways is to replace relative pathes with full path from

../../Content/Images/cocoon_health_logo.png

to

/cocoonhealth/Content/Images/cocoon_health_logo.png

Answer 2

Your image sources do this:

<img height="59" width="228" title="Cocoon Health" alt="Cocoon Health" src="../../Content/Images/cocoon_health_logo.png"/>

This tells the browser...

../../Content/Images/cocoon_health_logo.png
Go Up a folder level > Go Up a folder level > Content/Images/...png

When you omit the / from the end of the url, you actually only need to go up one level, not two - because of the routing rule.

By Using the following

<img height="59" width="228" title="Cocoon Health" alt="Cocoon Health" src="/cocoonhealth/Content/Images/cocoon_health_logo.png"/>

You're telling the browser to...

/cocoonhealth/Content/Images/cocoon_health_logo.png
/(start from the root) > cocoonhealth/Content/Images/cocoon_health_logo.png

So this will work with and without the slash.

You can also use the BASE tag in HTML, but you should read about it first as otherwise it will surprise you!

Answer 3

You are right guys! I forgot to add the <%= Url.Content() %> inside the master.pages. Thank you very much!