The images do not show on page after publishing the web-application on IIS

Question

The images do not show on page after publishing the web-application on IIS.

When I run the web-application from Visual Studio 2015, the pictures are appear correctly.the path of image is like

/media/1713/mypicture.png

But after publishing the web-application on IIS and run it, the pictures do not show. But when I add manually the domain at first of above path, the image show correctly. same as

/domain-name/media/1713/mypicture.png.

I've used Umbraco 7.4.3, ASP.NET MVC, VS2015 and Windows 10.

EDIT: I UPGRADED IT TO UMBRACO 7.5.4 BUT STILL THERE IS THE PROBLEM. :(

How can I solve this problem? Please help me.

umbracosettings.config:

<?xml version="1.0" encoding="utf-8" ?>
<settings>

  <content>

    <errors>
      <error404>1</error404>
    </errors>

    <notifications>
      <!-- the email that should be used as from mail when umbraco sends a notification -->
      <email>your@email.here</email>
    </notifications>

    <!-- Show property descriptions in editing view "icon|text|none" -->
    <PropertyContextHelpOption>text</PropertyContextHelpOption>

    <!-- The html injected into a (x)html page if Umbraco is running in preview mode -->
    <PreviewBadge>
      <![CDATA[<a id="umbracoPreviewBadge" style="position: absolute; top: 0; right: 0; border: 0; width: 149px; height: 149px; background: url('{1}/preview/previewModeBadge.png') no-repeat;z-index: 9999999;" href="#" OnClick="javascript:window.top.location.href = '{0}/endPreview.aspx?redir={2}'"><span style="display:none;">In Preview Mode - click to end</span></a>]]></PreviewBadge>

    <!-- Cache cycle of Media and Member data fetched from the umbraco.library methods -->
    <!-- In seconds. 0 will disable cache -->
    <UmbracoLibraryCacheDuration>1800</UmbracoLibraryCacheDuration>

    <!-- How Umbraco should handle errors during macro execution. Can be one of the following values:
         - inline - show an inline error within the macro but allow the page to continue rendering. Historial Umbraco behaviour.
         - silent - Silently suppress the error and do not render the offending macro.
         - throw  - Throw an exception which can be caught by the global error handler defined in Application_OnError. If no such
                    error handler is defined then you'll see the Yellow Screen Of Death (YSOD) error page.
         Note the error can also be handled by the umbraco.macro.Error event, where you can log/alarm with your own code and change the behaviour per event. -->
    <MacroErrors>throw</MacroErrors>

    <!-- These file types will not be allowed to be uploaded via the upload control for media and content -->
    <disallowedUploadFiles>ashx,aspx,ascx,config,cshtml,vbhtml,asmx,air,axd,swf,xml,html,htm,svg,php,htaccess</disallowedUploadFiles>

    <!-- Defines the default document type property used when adding properties in the back-office (if missing or empty, defaults to Textstring -->
    <defaultDocumentTypeProperty>Textstring</defaultDocumentTypeProperty>
  </content>

  <security>
    <!-- set to true to auto update login interval (and there by disabling the lock screen -->
    <keepUserLoggedIn>false</keepUserLoggedIn>
    <!-- change in 4.8: Disabled users are now showed dimmed and last in the tree. If you prefer not to display them set this to true -->
    <hideDisabledUsersInBackoffice>false</hideDisabledUsersInBackoffice>
  </security>

  <requestHandler>
    <!-- this will ensure that urls are unique when running with multiple root nodes -->
    <useDomainPrefixes>false</useDomainPrefixes>
    <!-- this will add a trailing slash (/) to urls when in directory url mode -->
    <addTrailingSlash>true</addTrailingSlash>   
  </requestHandler>

  <templates>
    <!-- To switch the default rendering engine to MVC, change this value from WebForms to Mvc -->
    <defaultRenderingEngine>Mvc</defaultRenderingEngine>
  </templates>

  <scheduledTasks>
    <!-- add tasks that should be called with an interval (seconds) -->
    <!--    <task log="true" alias="test60" interval="60" url="http://localhost/umbraco/test.aspx"/>-->
  </scheduledTasks>

  <!-- distributed calls must be enabled when using Umbraco in a load balanced environment -->
  <distributedCall enable="false">
    <!-- the id of the user who's making the calls -->
    <!-- needed for security, umbraco will automatically look up correct login and passwords -->
    <user>0</user>

    <!--
    When distributed call is enabled, you need to add all of the servers part taking in load balancing
    to the server list below. 
    -->

    <servers>

    </servers>
  </distributedCall>
  <web.routing
    trySkipIisCustomErrors="false"
    internalRedirectPreservesTemplate="false" disableAlternativeTemplates="false" disableFindContentByIdPath="false"
    umbracoApplicationUrl="">
  </web.routing>

</settings>

I've used img tag in my cshtml file like this:

<img style="display: block;" src="@Model.Model.MainPicture" alt="@Model.Model.FirstTitle">

Answer 1

Sometimes if you add images in project not in usual way to include, it will not update images in build/packages, which you are submitting to IIS. Make your image in solution explorer, right click the image in solution explorer and choose properties then select "Copy always" and build project. Then publish to IIS.