Phil Murray
Phil Murray

Reputation: 6554

MVC4 Project Images not displaying

I have just deployed my first MVC4 project from my development machine to my production IIS7.5 server and I am having some issues with getting the images to display correctly on the server.

Could this be an permissions issue in IIS7?

<input type="image" src="Content/Images/Product.png" runat="server" />

enter image description here

When I run this on my desktop the images are displayed correctly but when I deploy to the server I get the standard broken link image. I have confirmed that the images are on the server in the correct path.

I have also tried changing the src to use the tilde character src="~/Content/Images/Product.png" but it still does not work

This is also starting to effect the loading of the site.css file

<head>
    <meta charset="utf-8" />
    <title>@ViewData("Title")</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.6.2.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/modernizr-2.0.6-development-only.js")" type="text/javascript"></script>
</head>

In Chrome I'm getting an error saying its not found and its not loading in any browse but I have confirmed its on disk. enter image description here

Something strange going on here...

Web.Config

<?xml version="1.0"?>
<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=152368
  -->
<configuration>
  <configSections>
    <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
    <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=4.4.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false"/>
  </configSections>
  <appSettings>
    <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
  </appSettings>
  <system.web>
    <compilation debug="true" targetFramework="4.0"/>
    <authentication mode="Forms">
      <forms loginUrl="~/Account/LogOn" timeout="2880"/>
    </authentication>
    <pages controlRenderingCompatibilityVersion="4.0">
      <namespaces>
        <add namespace="System.Web.Helpers"/>
        <add namespace="System.Web.Mvc"/>
        <add namespace="System.Web.Mvc.Ajax"/>
        <add namespace="System.Web.Mvc.Html"/>
        <add namespace="System.Web.Routing"/>
        <add namespace="System.Web.WebPages"/>
      </namespaces>
    </pages>
    <profile defaultProvider="DefaultProfileProvider">
      <providers>
        <add name="DefaultProfileProvider" type="System.Web.Providers.DefaultProfileProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" applicationName="/"/>
      </providers>
    </profile>
    <membership defaultProvider="DefaultMembershipProvider">
      <providers>
        <add name="DefaultMembershipProvider" type="System.Web.Providers.DefaultMembershipProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10" applicationName="/"/>
      </providers>
    </membership>
    <roleManager defaultProvider="DefaultRoleProvider">
      <providers>
        <add name="DefaultRoleProvider" type="System.Web.Providers.DefaultRoleProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection" applicationName="/"/>
      </providers>
    </roleManager>
    <sessionState mode="InProc" customProvider="DefaultSessionProvider">
      <providers>
        <add name="DefaultSessionProvider" type="System.Web.Providers.DefaultSessionStateProvider, System.Web.Providers, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" connectionStringName="DefaultConnection"/>
      </providers>
    </sessionState>
  </system.web>
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true"/>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35"/>
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="3.0.0.0"/>
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
  <entityFramework>
    <defaultConnectionFactory type="System.Data.Entity.Infrastructure.SqlConnectionFactory, EntityFramework"/>
  </entityFramework>
  <connectionStrings>
    <add name="DefaultConnection" providerName="System.Data.SqlClient" connectionString="Data Source=(LocalDb)\v11.0;Initial Catalog=aspnet-QSmartRectification-20120731104636;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|\aspnet-QSmartRectification-20120731104636.mdf"/>
  </connectionStrings>
  <system.serviceModel>
    <bindings>
      <basicHttpBinding>
        <binding name="Synchronise" />
      </basicHttpBinding>
    </bindings>
    <client>
      <endpoint address="http://172.30.66.20/QSmart/Synchronise/" binding="basicHttpBinding"
        bindingConfiguration="Synchronise" contract="QSmartRectificationProvider.ISyncProvider"
        name="Synchronise" />
    </client>
  </system.serviceModel>
</configuration>

Upvotes: 4

Views: 8784

Answers (4)

VJAI
VJAI

Reputation: 32758

Did you try prefixing a "/" at front?

<input type="image" src="/Content/Images/Product.png" runat="server" />

One more guess is you may have set the RouteExistingFiles property as true in the routing and because of that the css and images are not loading up.

Upvotes: 0

omar
omar

Reputation: 15

you Can access to it as server.MapPath("Images")+yourPhoto or as Mappath(".")+\\Images\\+yourPhoto

Upvotes: 0

Ben
Ben

Reputation: 282

This might be a problem with the absolute path. If the page is a view ActionResult and default routing rules apply then you can try "../../content/product.png" instead. Alternatively you may use helper @Url.Content("~/content/product.png"). You can always check the absolute path with your browser.

Also check your routing rules and see if it maps the content folder to a controller.

Upvotes: 7

Bardia
Bardia

Reputation: 393

Where are you calling the image? if you are in one of the "View" folder you should try src="../../Content/Images/Product.png"

note: each .. means one folder up.

Upvotes: 0

Related Questions